Google Maps API v3 For loop Trouble

Question

Peut-être que je vais complètement à côté de ce que j'essaie de faire, mais je suis tenté de revenir à la version 2 parce que je l'ai fait fonctionner facilement (mais je voudrais être mobile-friendly). J'essaie de générer quelques marqueurs, et pour enregistrer du code, j'ai mis la génération de marqueur dans une boucle for, qui boucle à travers un tableau de marqueurs (il y a des valeurs réelles au lieu de (long, lat, x, x, x) dans le tableau réel).

Est-ce que quelque chose me dépasse complètement?

function initialize() { 
    var latlng = new google.maps.LatLng(25, 15); 
    var myOptions = { 
     zoom: 2, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 


var myMarker = new Array(); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 

for(var i = 0; i < myMarker.length; i++) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(myMarker[i](1), myMarker[i](2)), 
     map: map, 
     title: myMarker[i](5) 
     }); 
    var infowindow = new google.maps.InfoWindow({content: myMarker[i](5)}); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
    }); 
} 

}

Ce code fonctionne quand je fais les marqueurs individuellement.

Answer 1

Le problème est que toutes ces fonctions d'écoute partagent les mêmes valeurs "map" et "marker". Vous devez les envelopper dans une autre fonction:

(function(map, marker) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
    }); 
})(map, marker); 

Les variables « carte » et « marqueur » changent à chaque itération dans la boucle. Ces fonctions d'écouteur n'en ont pas de copie à moins que vous n'ayez explicitement créé quelque chose pour le faire, comme je l'ai fait dans cet exemple. Ainsi, tous les auditeurs finissent par travailler sur la dernière chose que la boucle a touchée!

modifier — fait maintenant que je lis sur le code à nouveau, « carte » ressemble à ça ne change pas, il peut donc probablement être mis hors de ma configuration (ne fait pas mal rien que).

Answer 2

Hmm peu de choses j'ai remarqué sont les définitions de tableau et y accéder. par exemple

// here your defining the array, quick tip just use [] instead of new Array(); its faster, in both execution and to type :) 
var myMarker = new Array(); 

//here your defining the 1st value in the array at the 0 index 
myMarker[0] = new Array(long,lat,x,x,x); 

//but again here your overriding the first value of the array at 0 index 
myMarker[0] = new Array(long,lat,x,x,x); 

il devrait donc ressembler davantage à ce

var myMarker = new Array(); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[1] = new Array(long,lat,x,x,x); 
myMarker[2] = new Array(long,lat,x,x,x); 
myMarker[3] = new Array(long,lat,x,x,x); 
myMarker[4] = new Array(long,lat,x,x,x); 
myMarker[5] = new Array(long,lat,x,x,x); 
myMarker[6] = new Array(long,lat,x,x,x); 

puis quand vous allez accéder aux valeurs dans votre tableau votre utilisant

title: myMarker[i](5) 

Vous devriez avoir, en supposant que vous avez 5 valeurs dans chaque matrice de marqueurs

title: myMarker[i][4] 

les tableaux en javascript sont basés sur l'indexation 0 et utilisent des barres carrées [] et non des parenthèses.

edit: corrections de grammaire :)

Answer 3

Le problème est qu'il n'y a qu'une seule valeur , et chaque itération de la boucle change. Les fonctions du gestionnaire d'événements ne gardent aucune trace du marqueur dont ils ont besoin.

La bonne façon de résoudre ce problème est de savoir que le est transmis au gestionnaire d'événements sous la forme this. Le correctif simple est:

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map, this); // <-- changed 'marker' to 'this' 
});