Code source et résultat différent

Bonjour,

Voici le code javascript que je génére via php :

function initialize() {
          var mapOptions = {
            zoom: 14,
            center: new google.maps.LatLng(47.05, -0.87400)
          }
          var zoneMarqueurs = new google.maps.LatLngBounds();
          var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
          var geocoder= new google.maps.Geocoder();var image = 'images/marqueurs_vert/number_1.png';
          var address ="19 rue de la porte baron, 49300 CHOLET";
          geocoder.geocode( { 'address': address}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    var marker1 = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,
                        icon: image,
                        draggable: true
                    });
                  } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                  }//endelse
                });var image = 'images/marqueurs_vert/number_2.png';
                var address ="12 rue du bocage, 49300 CHOLET";
                geocoder.geocode( { 'address': address}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    var marker2 = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,
                        icon: image,
                        draggable: true
                    });
                  } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                  }//endelse
                });var image = 'images/marqueurs_vert/number_3.png';
                var address ="8 avenue des calins, 49300 CHOLET";
                geocoder.geocode( { 'address': address}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    var marker3 = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,
                        icon: image,
                        draggable: true
                    });
                  } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                  }//endelse
                });var image = 'images/marqueurs_vert/number_4.png';
                var address ="60 avenue des calins, 49300 CHOLET";
                geocoder.geocode( { 'address': address}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    var marker4 = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,
                        icon: image,
                        draggable: true
                    });
                  } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                  }//endelse
                });          }
          google.maps.event.addDomListener(window, 'load', initialize);

Une carte google map, 4 marqueurs placés avec Geocode, en recherchant les coordonnées GPS avec l'adresse. Dans le code, c'est propre, mais sur le papier, il y a un problème :

Voir l'image


Les marqueurs correspondent à :

;var image = 'images/marqueurs_vert/number_4.png';

Or d'après le code chaque marqueur a son image, mais pourquoi ça n'est pas le cas ?

Merci d'avance.
Modifié par Kikimagik (01 Jul 2014 - 15:12)

Bonjour,

L'API Google de geolocalisation est asynchrone, ce qui explique que c'est la dernière assignation de la variable image qui est utilisée.
Donc pour résoudre le problème, il ne faut pas utiliser de variable externe à la fonction, et écrire :

icon: 'images/marqueurs_vert/number_x.png' ,