Google Maps mehrere Marker mit mehreren einzigartigen Infoboxen

Question

Ein Projekt, an dem ich gerade arbeite, erfordert die Implementierung einer Google Map mit mehreren Markern mit mehreren Infoboxen. Referenzierung der Karte API dies wie ein guter Ausgangspunkt schien:

https://developers.google.com/maps/documentation/javascript/examples/icon-complex

So habe ich diesen Code als Basis und von dort gebaut auf. Jetzt ist das Bit, auf dem ich feststecke, eine einzigartige Infobox zu jedem Marker hinzuzufügen. hier ist meine Quelle

http://jsfiddle.net/jackthedev/asK5v/1/

wie Sie mich versuche zu nennen das erste Element, von denen je Objekt im Array sehen können, ist ausgewählt, die perfekt für die lat, long und Titel funktionieren einfach nicht der contentstring Variable.

for (var i = 0; i < locations.length; i++) { 

    var office = locations[i]; 
    var myLatLng = new google.maps.LatLng(office[1], office[2]); //works here 
    var infowindow = new google.maps.InfoWindow({content: contentString}); 

    var contentString = 
     '<div id="content">'+ 
     '<div id="siteNotice">'+ 
     '</div>'+ 
     '<h1 id="firstHeading" class="firstHeading">'+ office[0] + '</h1>'+ //doesnt work here 
     '<div id="bodyContent">'+ 
     '</div>'+ 
     '</div>'; 

    var infowindow = new google.maps.InfoWindow({content: contentString}); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: globalPin, 
     title: office[0], //works here 
    }); 

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

Um zu sehen, was ich gerade klicken Sie einfach auf jede der Markierungen auf der Demo oben zu erklären versuche, und Sie werden das eine infobox Popup mit dem Titel ‚China‘ sehen. Aus irgendeinem Grund greift er das erste Element des letzten Objekts für jeden Marker.

Was ich versuche zu erreichen ist, dass alle Infoboxen dort einzigartig sind, wenn das Sinn macht? Wenn ich also auf einen Marker in Singapur klicke, erscheint eine Infobox mit dem Titel Singapur mit den zuvor definierten Array-Objekten.

Danke und ich hoffe, dass ich genug

---

Answer 1

Das Problem ist, dass die Variable infoWindow für jede Iteration der Schleife überschrieben zu werden. Klar gewesen sein Normalerweise ist dies kein Problem, außer dass der Teil innerhalb von addListener ein asynchroner Rückruf ist und zu dem Zeitpunkt, zu dem jeder aufgerufen wird, ist der Verweis auf infoWindow nicht mehr korrekt.

Sie können umgehen, indem Sie eine Schließung für infoWindow erstellen, so dass jede Callback-Funktion eine eigene Kopie erhält. Verwenden Sie diese Option:

google.maps.event.addListener(marker, 'click', getInfoCallback(map, contentString)); 

Mit der beiliegenden Hilfsfunktion:

function getInfoCallback(map, content) { 
    var infowindow = new google.maps.InfoWindow({content: content}); 
    return function() { 
      infowindow.setContent(content); 
      infowindow.open(map, this); 
     }; 
} 

See here for a forked Fiddle.