Javascript Google Map API V3 - 点击标记以叠加显示更多信息内容（如在 Google 地图中）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10999858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Map API V3 - Click on Marker show more info content as overlay (like in Google Maps)
提问by Srinivasan
We use Google Map Api V3 to load google map in HTML container. We have a location search form. On submit, we will get the available locations and set markers in map. Once markers are loaded, on click on each marker we need to show Title, address details and design like what we have in google map. (In google maps - When clicking on red marker, we can see the more info overlay box with additional details like Stars, Directions, Search nearby, Save to Map, More..)
我们使用 Google Map Api V3 在 HTML 容器中加载谷歌地图。我们有一个位置搜索表单。提交时，我们将获取可用位置并在地图中设置标记。加载标记后，单击每个标记，我们需要显示标题、地址详细信息和设计，就像我们在谷歌地图中所拥有的一样。（在谷歌地图中 - 单击红色标记时，我们可以看到更多信息叠加框，其中包含其他详细信息，例如星星、路线、附近搜索、保存到地图等。）
Do we have built in api function to load the overlay box like above. Or we don't have the function to load the details like what we have in google map currently.
我们是否内置了 api 函数来加载上面的覆盖框。或者我们没有加载细节的功能，比如我们目前在谷歌地图中的内容。
When i searched in google and map docs, i can see options to show overlay window and write content inside the box. But i didn't see options to load the content as required.
当我在谷歌和地图文档中搜索时，我可以看到显示覆盖窗口和在框中写入内容的选项。但是我没有看到根据需要加载内容的选项。
I have pasted the code below for reference.
我已经粘贴了下面的代码以供参考。
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");
});
}
}
}
If there is any hint on how to achieve these results, it will be helpful. Also, please guide, whether it is possible through Google API V3.
如果有关于如何实现这些结果的任何提示，将会有所帮助。另外，请指导，是否可以通过Google API V3。
Thanks in Advance,
提前致谢，
Regards
问候
Srinivasan.C
斯里尼瓦桑
回答by transilvlad
I don't understand why are you opening a new window to Google Maps from a Google Maps API marker? You cannot add info window on Google Maps via URL.
我不明白你为什么要从谷歌地图 API 标记打开一个新的谷歌地图窗口？您无法通过 URL 在 Google 地图上添加信息窗口。
This is how I do it.
我就是这样做的。
<!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,
map: map,
data: data
});
// Listen for click event
google.maps.event.addListener(pinMarker, 'click', 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>
