I tried to add multiple markers and infowindow to a google map using javascript. Below is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [ '1961 East Mall Vancouver BC',
'2366 Main Mall Vancouver BC', '2053 Main Mall, Vancouver, BC ' ];
var map = new google.maps.Map(document.getElementById('map'), {
zoom : 14,
center : new google.maps.LatLng(49.26526, -123.250541),
mapTypeId : google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
var geocoder = new google.maps.Geocoder();
geocoder
.geocode(
{
'address' : locations[i]
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map : map,
position : results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: '
+ status);
}
});
//add info window
google.maps.event.addListener(marker, 'click',
(function(marker, i) {
return function() {
infowindow.setContent(locations[i]);
infowindow.open(map, marker);
}
})(marker, i));
//end of adding info window
}//end of for loop
</script>
</body>
</html>
(Thanks to Google Maps JS API v3 - Simple Multiple Marker Example)
The problem is that: unless I comment
//add info window
google.maps.event.addListener(marker, 'click',
(function(marker, i) {
return function() {
infowindow.setContent(locations[i]);
infowindow.open(map, marker);
}
})(marker, i));
//end of adding info window
I will only get one marker with no infowindow popup when clicking.
If I comment above code block, I will get three markers, but no infowindow popup either.
Where did I make mistake?
Thank you.
The geocoder is asynchronous, you need to add the infowindow inside the geocoder call back. Where you have it currently it runs before any of the markers are defined. I would think you would get a javascript error.
Minghui Yu
This works:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [ '1961 East Mall Vancouver BC',
'2366 Main Mall Vancouver BC', '2053 Main Mall, Vancouver, BC ' ];
var map = new google.maps.Map(document.getElementById('map'), {
zoom : 14,
center : new google.maps.LatLng(49.26526, -123.250541),
mapTypeId : google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker;
var i;
$(document).ready(function() {
initialize();
});
function initialize(){
setMarkers(map,locations);
}
function setMarkers(map, address) {
for ( var i = 0; i < address.length; i++) {
setMarker(map, address[i])
}
}
function setMarker(map, address) {
geocoder = new google.maps.Geocoder();
geocoder
.geocode(
{
'address' : address
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker(
{
position : results[0].geometry.location,
map : map
});
google.maps.event.addListener(marker,
"click", function() {
infowindow.setContent(address);
infowindow.open(map, marker);
});
} else {
alert("Geocode was not successful for the following reason: "
+ status);
}
});
}
</script>
</body>
</html>
来源：https://stackoverflow.com/questions/12148783/google-map-multiple-infowindow-does-not-work