Google Maps API v3 multiple markers Infowindow

Question

I\'ve used the code below to display a map with multiple markers and infowindows. Now I have encountered the very common problem of the last infowindow showing up on all mar

Answer 1

geocoding is an asynchronous request. So when you use geocoding inside the for-loop, the loop is already finished when you receive the results, i will always be 1 and point to the last item of people.

What you can do: split the marker-creation into 2 functions. 1 for the loop which calls the 2nd function that creates the markers:

remove the current function setMarkers and add the following 2 functions to your script:

function setMarkers(map,people) {
   for (var i = 0; i < people.length; i++) {
      setMarker(map, people[i])
   }
}

function setMarker(map, people) {     
    var p=people;
    geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': p["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,
                html: p["address"]
            });

            var contentString = "Some content";

            google.maps.event.addListener(marker, "click", function () {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });  
}

The rest of your script may stay as it is.