Plusieurs marqueurs dans Google Maps API v3 qui pointent vers des pages différentes lorsqu'ils sont cliqués

Question

J'ai une carte avec plusieurs marqueurs, que je remplis via un tableau. Chaque marqueur est cliquable et devrait amener l'utilisateur à une URL différente par marqueur.

Le problème est que tous les marqueurs, tout en affichant le titre correct, tous utilisent l'URL de la dernière entrée dans le tableau.

Voici mon code:

var myOptions = { zoom: 9, center: new google.maps.LatLng(40.81940575,-73.95647955), mapTypeId: google.maps.MapTypeId.TERRAIN } 
var map = new google.maps.Map(document.getElementById("bigmap"), myOptions); 
setMarkers(map, properties); 

var properties = [ 
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'], 
['213 Bennett Avenue',40.8574384,-73.9333426,'Mjkz'], 
['50 Overlook Terrace',40.8543752,-73.9362542,'Mjky'], 
['850 West 176 Street',40.8476012,-73.9417571,'OTM='], 
['915 West End Avenue',40.8007478,-73.9692155,'Mjkx']]; 

function setMarkers(map, buildings) { 
    var image = new google.maps.MarkerImage('map_marker.png', new google.maps.Size(19,32), new google.maps.Point(0,0), new google.maps.Point(10,32)); 
    var shadow = new google.maps.MarkerImage('map_marker_shadow.png', new google.maps.Size(28,32), new google.maps.Point(0,0), new google.maps.Point(10,32)); 
    var bounds = new google.maps.LatLngBounds; 
    for (var i in buildings) { 
     var myLatLng = new google.maps.LatLng(buildings[i][1], buildings[i][2]); 
     bounds.extend(myLatLng); 
     var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, title: buildings[i][0] }); 
     google.maps.event.addListener(marker, 'click', function() { window.location = ('detail?b=' + buildings[i][3]); }); 
    } 
    map.fitBounds(bounds); 
} 

En utilisant ce code, cliquer sur un marqueur l'utilisateur vers

Qu'est-ce que je fais mal "détail b = Mjkx??

Answer 1

Le problème est que votre gestionnaire de clic utilise la variable i de la fonction externe.

L'exécution d'une boucle ne crée pas une copie distincte de la variable à chaque itération, donc votre fonction de rappel utilise la même valeur de i pour tous les rappels. Pour résoudre ce problème, écrivez une fonction distincte pour générer le rappel.

Par exemple:

function buildClickHandler(i) { 
    return function() { window.location = ('detail?b=' + buildings[i][3]); }; 
} 

for(var i = 0; i < buildings.length; i++) { 
    //... 
    google.maps.event.addListener(marker, 'click', buildClickHandler(i)); 
} 

(Vous devrez définir buildClickHandler l'intérieur setMarkers il peut utiliser le paramètre buildings)

Par ailleurs, lors de la boucle à travers un tableau, vous shouldn't use a for in loop, parce que il va également parcourir tous les membres supplémentaires de l'objet tableau.