javascript – Google Map API V3 – 点击标记将显示更多信息内容作为重叠式广告(如在Google Maps中)

我们使用Google Map Api V3在 HTML容器中加载Google地图.我们有一个位置搜索表单.在提交时,我们将获取可用的位置并在地图中设置标记.加载标记后,点击每个标记,我们需要显示标题,地址详细信息和设计,就像我们在Google地图中所使用的那样. (在谷歌地图 – 当点击红色的标记,我们可以看到更多的信息重叠框与额外的细节,如星星,路线,附近搜索,保存到地图,更多..)

我们是否内置了api功能来加载如上所述的叠加框.或者我们没有加载细节的功能,就像我们目前在谷歌地图中一样.

当我在谷歌和地图文档中搜索时,我可以看到显示叠加窗口的选项,并在框内写入内容.但是我没有看到根据需要加载内容的选项.

我已经粘贴下面的代码以供参考.

var map = null;
       gmap_ready = function (){
    var myLatlng = new google.maps.LatLng(43.834527,-103.564457);
    var myOptions = {
      zoom: 3,center: myLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

}

function fnLoadMarkers(){
var locations  = [
    ['S Dakota',43.834527,-103.564457,1],['Texas',31.428663,-99.418947,2],['California',36.668419,-120.249025,3],['Newyork',43.197167,-76.743166,4],['Missouri',38.410558,-92.73926,5]
];
setMarkers(map,locations);
   }
 function setMarkers(map,locations) {
var image = 'images/marker.gif';
 
for (var i = 0; i < locations.length; i++) {
    var currLocation = locations[i];
    var latLng = new google.maps.LatLng(currLocation[1],currLocation[2]);
    var marker = new google.maps.Marker({
        position: latLng,map: map,icon: image,title: currLocation[0],zIndex: currLocation[3]
    });
    google.maps.event.addListener(marker,'click',function() {
        var latitude = this.position.lat();
        var longitude = this.position.lng();
        window.open("http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q="+latitude+","+longitude+"&sll="+latitude+","+longitude+"&sspn=0.172749,0.4422&ie=UTF8&ll="+latitude+","+longitude+"&spn=0.162818,0.4422&z=11&iwloc=A");
    });
  }

}

如果有任何提示如何实现这些结果,这将是有益的.此外,请指导,无论是通过Google API V3可能.

提前致谢,

问候

Srinivasan.C

解决方法

我不明白你为什么要从Google Maps API标记向Google Maps打开一个新窗口？
您无法通过网址在Google地图上添加信息窗口.

这就是我这样做.

<!DOCTYPE html>  
<html>  
<head>  
<Meta name="viewport" content="initial-scale=1.0,user-scalable=no" /> 
<Meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />  
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript"> 
// Initiate map 
function initialize(data) { 
  // Make position for center map 
  var myLatLng = new google.maps.LatLng(data.lng,data.lat); 
 
  // Map options  
  var myOptions = { 
    zoom: 10,center: myLatLng,mapTypeId: google.maps.MapTypeId.HYBRID 
  }; 
 
  // Initiate map 
  map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
 
  // Info window element 
  infowindow = new google.maps.InfoWindow(); 
 
  // Set pin 
  setPin(data); 
} 
// Show position 
function setPin(data) { 
  var pinLatLng = new google.maps.LatLng(data.lng,data.lat); 
  var pinMarker = new google.maps.Marker({ 
    position: pinLatLng,data: data 
  }); 
 
  // Listen for click event  
  google.maps.event.addListener(pinMarker,function() { 
    map.setCenter(new google.maps.LatLng(pinMarker.position.lat(),pinMarker.position.lng())); 
    map.setZoom(18); 
    onItemClick(event,pinMarker); 
  }); 
} 
// Info window trigger function 
function onItemClick(event,pin) { 
  // Create content  
  var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat; 
 
  // Replace our Info Window's content and position 
  infowindow.setContent(contentString); 
  infowindow.setPosition(pin.position); 
  infowindow.open(map) 
} 
</script>  
</head>  
<body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})"> 
  <div id="map_canvas">  
</div>  
</body>  
</html>

javascript – Google Map API V3 – 点击标记将显示更多信息内容作为重叠式广告(如在Google Maps中)

解决方法

猜你在找的JavaScript相关文章