Google Maps API Multiple Markers with Infowindows
I am trying to add multiple markers each with its own infowindow that comes up when clicked on. I am having trouble with getting the infowindows coming up, when I try it either shows up only one marker without an infowindow.
Thanks, let me know if you need some more information
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: 100%
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false">
</script>
<script type="text/javascript">
var locations = [
['loan 1', 33.890542, 151.274856, 'address 1'],
['loan 2', 33.923036, 151.259052, 'address 2'],
['loan 3', 34.028249, 151.157507, 'address 3'],
['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
['loan 5', 33.950198, 151.259302, 'address 5']
];
function initialize() {
var myOptions = {
center: new google.maps.LatLng(33.890542, 151.274856),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("default"),
myOptions);
setMarkers(map, locations)
}
function setMarkers(map, locations) {
var marker, i
for (i = 0; i < locations.length; i++) {
var loan = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var add = locations[i][3]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map, title: loan, position: latlngset
});
map.setCenter(marker.getPosition())
var content = "Loan Number: " + loan + '</h3>' + "Address: " + add
var infowindow = new google.maps.InfoWindow()
google.maps.AddListener(marker, 'click', function (map, marker) {
infowindow.setContent(content)
infowindow.open(map, marker)
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>
You could use a closure. Just modify your code like this:
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
Here is the DEMO
Here is the code snippet which will work for sure. You can visit below link for working jsFiddle and explainantion in detail. How to locate multiple addresses on google maps with perfect zoom
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'mouseover', (function(marker) {
return function() {
var content = address;
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker));
如果您还想将infowindow的关闭绑定到某个事件，请尝试如下所示
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
windows.push(infowindow)
google.maps.event.addListener(map,'click', function(){
infowindow.close();
});
};
})(marker,content,infowindow));
上一篇: 在infowindow中显示时检查街景