![](/img/trans.png)
[英]google maps api v3 - open infowindow from an external click
[英]Google Maps API V3, infoWindow open on click
我一直在尝试使Google Maps API可以正常工作。
我想要实现的是,当您单击底部的html按钮时,它们触发了infoWindow的显示。 我不确定在哪里放置infowindow打开功能,我看了其他示例,但是它们似乎在下面的代码中不起作用。
到目前为止,这是我得到的:jsfiddle: http : //jsfiddle.net/7jJZK/4/
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
// iniitial location + settings
var map;
function initialize() {
var myOptions = {
disableDefaultUI: true,
zoom: 16,
center: new google.maps.LatLng(45.376187, -0.525799),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
// locations
initialize();
var locations = [
['hello', 45.376187, -0.525799],
['2', 56.376187, -0.525799],
['3', 53.376187, -0.525799],
['4', 54.176187, -0.525799],
['5', 52.376187, -0.525799]
];
// infowindow
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
// panTo
$("#location-menu").on("click", "#location1", function() {
var laLatLng = new google.maps.LatLng(45.376187, -0.525799);
map.panTo(laLatLng);
});
$("#location-menu").on("click", "#location2", function() {
var laLatLng = new google.maps.LatLng(56.376187, -0.525799);
map.panTo(laLatLng);
});
$("#location-menu").on("click", "#location3", function() {
var laLatLng = new google.maps.LatLng(53.376187, -0.525799);
map.panTo(laLatLng);
});
$("#location-menu").on("click", "#location4", function() {
var laLatLng = new google.maps.LatLng(54.176187, -0.525799);
map.panTo(laLatLng);
});
$("#location-menu").on("click", "#location5", function() {
var laLatLng = new google.maps.LatLng(52.376187, -0.525799);
map.panTo(laLatLng);
});
});
<div id="map_canvas" style="width: 990px; height: 330px"></div>
<div id="location-menu">
<input type="button" id="location1" value="location 1" />
<input type="button" id="location2" value="location 2"/>
<input type="button" id="location3" value="location 3" />
<input type="button" id="location4" value="location 4"/>
<input type="button" id="location5" value="location 5"/>
</div>
var gmarkers = [];
gmarkers.push(marker);
使用google.maps.event.trigger(,“ click”)打开信息窗口
$("#location-menu").on("click", "#location1", function() { google.maps.event.trigger(gmarkers[0], "click"); var laLatLng = new google.maps.LatLng(45.376187, -0.525799); map.panTo(laLatLng); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.