Google Maps API v3 APIs with Multiple Infowindow Tokens

Question

I used the code below to display a map with several markers and info windows. Now I am faced with a very common problem of the latest info industry appearing on all markers. I tried all kinds of solutions, including: http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/ , and this http: // www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loop , but none of them fix the problem.

Here is my code:

var infowindow = null; var geocoder; var map; $(document).ready(function() { initialize(); }); function initialize() { var myOptions = { zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, scrollwheel: false }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); setMarkers(map, people); infowindow = new google.maps.InfoWindow({ content: "loading..." }); } var people = [ {"userid":"47","lastname":"lastname1","firstname":"firstname1","address":"Paris, France","phone1":"00000000000","phone2":"","email":" [e-mail] "}, {"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"Versaille, France","phone1":"0","phone2":"0","email":" [e-mail] "} ]; function setMarkers(map, people) { for (var i = 0; i < people.length; i++) { var p = people[i]; 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); } }); } } 

Answer 1

geocoding is an asynchronous request. Therefore, when you use geocoding inside a for loop, the loop is already completed, when you get the results, i will always be 1 and point to the last element of people.

What you can do: divide the creation marker into 2 functions. 1 for a loop that calls a second function that creates tokens:

remove the current setMarkers function 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 remain as it is.