我们使用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地图上添加信息窗口.
您无法通过网址在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>
