Google maps 我想从表上的链接打开“地图信息”窗口_Google Maps_Google Maps Api 3_Google Maps Markers

Google maps 我想从表上的链接打开“地图信息”窗口

google-maps google-maps-api-3

Google maps 我想从表上的链接打开“地图信息”窗口,google-maps,google-maps-api-3,google-maps-markers,Google Maps,Google Maps Api 3,Google Maps Markers,我现在正在做一个包含谷歌地图API的项目！我正在从数据库中使用mysql在地图上加载标记。现在我所要做的是我以前见过的事情我想在显示的表格上创建一个链接，点击它会在地图上打开一个信息窗口……我完全不知道从哪里开始这是我的地图代码 <?php include("connect.php"); ?> <!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="text/htm

我现在正在做一个包含谷歌地图API的项目！我正在从数据库中使用mysql在地图上加载标记。现在我所要做的是我以前见过的事情

我想在显示的表格上创建一个链接，点击它会在地图上打开一个信息窗口……我完全不知道从哪里开始

这是我的地图代码

    <?php include("connect.php"); 

?>
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" type="text/css" rel="stylesheet" media="screen" />
<title>AzamTv Customer Database</title>
<style type="text/css">
<!--
.style2 {color: #999999}
.style3 {color: #666666}
.style4 {color: #FF0000}
.style5 {color: #3366FF}
-->
</style>

<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>


<script language="javascript" type="text/javascript">
function downloadUrl(url,callback) {
 var request = window.ActiveXObject ?
     new ActiveXObject('Microsoft.XMLHTTP') :
     new XMLHttpRequest;

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     request.onreadystatechange = doNothing;
     callback(request, request.status);
   }
 };

 request.open('GET', url, true);
 request.send(null);
}
//Get element by ID where the function return tand get the latitude and longitude
//do not embed any thing before authorized permition to google.
function load() {
      var map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: new google.maps.LatLng( -6.801859, 39.282503),

        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;


downloadUrl("mapxml.php", function(data) {
  var xml = data.responseXML;
   var markers = xml.documentElement.getElementsByTagName("marker");

  for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var address = markers[i].getAttribute("address");
    var licence_number = markers[i].getAttribute("Licence_number");
    var phone = markers[i].getAttribute("phone");
    var business_image = markers[i].getAttribute("business_image");
    var type = markers[i].getAttribute("type");
     var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));

        //Creating image
        var image_src= "<div><img width='100' height='100' src=' "+ business_image +"' /></div>";   


        var html = "<b>" +"<h4>Business Name:</h4>"+ name + "</b> <br/><br/>"+"<h4>Address:</h4>" + address + "</b> <br/><br/>"+"<h4>Licence Type:</h4>" + licence_number + "</b> <br/><br/>" + "<h4>Phone:</h4>" + phone + "</b> <br/><br/>"+"<h4>Image:</h4>" + image_src + "</br> <a href=\"javascript:zoomout()\">Zoom out</a> <a href=\"javascript:zoomin()\">Zoom in</a>" ;


    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon,
      shadow: icon.shadow
    });
    bindInfoWindow(marker, map, infoWindow, html);
  }
});

//If u wanna change the markers by adding custom ones of ur own add here
var customIcons = {
  TIN: {
    icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'
  },
  VAT: {
    icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png'
  }
};

}
function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {

  // Pan map center to marker position
  map.panTo(marker.getPosition());
   var c= map.getZoom()+3;
   var maxZoom=map.mapTypes[map.getMapTypeId()].maxZoom;
    if(c<=maxZoom){
           map.setZoom(c+3);
    }

    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}
function doNothing() {}
function zoomout() {
    var d = map.getZoom();
    if(d>0){
        map.setZoom(d-1);
    }
    //  e = map.getCenter();
    //  map.setZoom(d - 1);
    //  map.setCenter(e.Longitude, e.Latitude);
    //  should be: map.setCenter(e.lat(), e.lng());
}

function zoomin() {
    var x = map.getZoom();
    var maxZoom=map.mapTypes[map.getMapTypeId()].maxZoom;
    if(x<maxZoom){
        map.setZoom(x+1);   
    }
    //  y = map.getCenter();
    //  map.setZoom(x + 1);
    //  map.setCenter(y.Longitude, y.Latitude);
    //  should be: map.setCenter(y.lat(), y.lng());
}

</script>




<script language="javascript" type="text/javascript">

//Script For The Search
function cleartxt()
{
formsearch.searched1.value="";
}
function settxt()
{
  if(formsearch.searched1.value=="")
  {
  formsearch.searched1.value="Search Customer";
  }
 }

</script>

</head>


<body onLoad="load()">

    <div id="map" style="width: 100%; height: 80%"></div>

</body>
</html>


AzamTv客户数据库
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
//按ID获取元素，函数返回并获取纬度和经度
//未经谷歌授权，不得嵌入任何东西。
函数加载（）{
var map=new google.maps.map（document.getElementById（“map_canvas”）{
中心：新google.maps.LatLng（-6.801859,39.282503），
缩放：13，
mapTypeId:“路线图”
});
var infoWindow=new google.maps.infoWindow；
下载URL（“mapxml.php”，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i
“+”地址：“+Address+”

“+”许可证类型：“+license\u number+”

“+”电话：“+Phone+”

“+”图像：“+Image\u src+”
”；
var icon=customIcons[type]| |{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
icon:icon.icon，
阴影：icon.shadow
});
bindInfoWindow（标记、地图、infoWindow、html）；
}
});
//如果你想通过添加你自己的自定义标记来更改标记，请在此处添加
var customIcons={
锡：{
图标：'http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'
},
增值税：{
图标：'http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png'
}
};
}
函数bindInfoWindow（标记、地图、infoWindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
//将地图中心平移到标记位置
map.panTo（marker.getPosition（））；
var c=map.getZoom（）+3；
var maxZoom=map.mapTypes[map.getMapTypeId（）].maxZoom；
如果（c0）{
地图设置缩放（d-1）；
}
//e=map.getCenter（）；
//地图.setZoom（d-1）；
//地图设置中心（e.经度，e.纬度）；
//应该是：map.setCenter（e.lat（），e.lng（））；
}
函数zoomin（）{
var x=map.getZoom（）；
var maxZoom=map.mapTypes[map.getMapTypeId（）].maxZoom；
如果（x您创建了如下标记
var marker = new google.maps.Marker({
            position: myLatlng,
            title:"Your title"
        });

创建一个点击触发的链接
infowindow.open(map,marker);

我想就这些
编辑：您可以通过href参数识别需要显示的标记，您的意思是喜欢吗？谢谢，但我已经看到了…我想将这些链接分配到表上的一列，该列显示从数据库查询的数据。该链接还应与数据库上的名称相对应。您可以详细说明吗？谢谢，但我如果手动添加标记，我的标记将直接从数据库中提取