Geocoding and Google Maps V3 markers in a loop

Question

I have some problems with my code, I have a list of airports in the sql database, and I want to create tokens for each of these airports.

For the address I received ICAO codes for each airport, ICAO is unique for each airport

I get data from a database as an array

it is saved in "temp" using the split function and using for-loop gets them 1 on 1

Geocoding is not a problem, but I don’t know why for TITLE and the click event it is always the last of the array used.

here is the page, the last entry in the database is ZBAA.

And all the markers are placed in the right place, but the title is wrong: s

http://mizar.lte.lu/~pr1011_meteo/projet/cartemonde4.php

The problem with the "address", I think, but I'm not sure.

for (var i = 0; i < temp.length; ++i){ var address=temp[i]; geocoder.geocode({ 'address': address}, function(results){ var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location, title:address }); google.maps.event.addListener(marker, 'click', function() { window.open ('infomonde.php?icao='+address+'&language=fr', 'Informations météo', config='height=400, width=850, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no')}); }); }; 

Answer 1

Here is the JSFiddle Demo using the "dummy" addresses and warnings to show the correct data associated with each token:

You have a typical closing / volume problem in a for loop. To fix the problem, use closure to localize the temp[i] variable before going into it using the geocoding and callback functions:

  for (var i = 0; i < temp.length; ++i) { (function(address) { geocoder.geocode({ 'address': address }, function(results) { var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location, title: address }); google.maps.event.addListener(marker, 'click', function() { //alert(address); //use alert to debug address window.open('infomonde.php?icao=' + address + '&language=fr', 'Informations météo', config = 'height=400, width=850, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no') }); }); })(temp[i]); //closure passing in temp[i] and use address within the closure } 

Answer 2

I suppose that

 geocoder.geocode({ 'address': address}, function(results){ ... }); 

callback is performed in the same context.

try to run the marker in the same context. the code below will wait for the entire extracted geocoder. then analyze the marker.

 var results = {}; var waiting = temp.length; while(temp.length > 0){ var fetching = temp.pop(); geocoder.geocode( { address: fetching}, function(response){ results[fetching] = response[0].geometry.location; --waiting; if(waiting == 0) // wait for everything to finish setMarker(); } ); } var setMarker = function(){ for(var element in results){ var marker = new google.maps.Marker({ map: map, position: results[element], title: element }); google.maps.event.addListener(marker, 'click', function() { window.open ('infomonde.php?icao='+element+'&language=fr', '', 'configs')}); } } 

ps window.open, if I'm not mistaken, some browser rejects the pop-up name (and may cause inability to open the pop-up window). I always leave empty.