2010-12-07 22 views
6

Aktuell Ich habe eine Google Maps, die einige Markierungen auf der Karte von meinem DB anzeigen ... Ich möchte ein Infofenster hinzufügen, wenn die Benutzer auf den Marker klicken.Mehrere Google Maps Infofenster

Ich habe es funktioniert, aber das Problem ist, dass es nur auf dem letzten Marker angezeigt wird, der geladen wurde, warum ist das?

Hier ist der Code zum Generieren des Markers und des Infowindows.

<script type="text/javascript"> 
function initialize() { 
    var myOptions = { 
     zoom: 3, 
     center: new google.maps.LatLng(41.850033, -87.6500523), 
     disableDefaultUI: true, 
     navigationControl: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    setMarkers(map, offices); 
} 


/** 
* Data for the markers consisting of a name, a LatLng and a zIndex for 
* the order in which these markers should display on top of each 
* other. 
*/ 
var offices = [<cfoutput>#officeList#</cfoutput>]; 

function setMarkers(map, locations) { 
    // Add markers to the map 
    // Marker sizes are expressed as a Size of X,Y 
    // where the origin of the image (0,0) is located 
    // in the top left of the image. 
    // Origins, anchor positions and coordinates of the marker 
    // increase in the X direction to the right and in 
    // the Y direction down. 
    var image = new google.maps.MarkerImage('images/pin.png', 
    // This marker is 20 pixels wide by 32 pixels tall. 
    new google.maps.Size(14, 26), 
    // The origin for this image is 0,0. 
    new google.maps.Point(0, 0), 
    // The anchor for this image is the base of the flagpole at 0,32. 
    new google.maps.Point(0, 32)); 

    for (var i = 0; i < locations.length; i++) { 
     var office = locations[i]; 
     var myLatLng = new google.maps.LatLng(office[1], office[2]); 

     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: image, 
      title: office[0], 
      zIndex: office[3] 
     }); 

     var contentString = "Hello!!!"; 
     var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map, marker); 
     }); 
    } 
} 
</script> 

Antwort

18

Ich bin auch über dieses Problem gestolpert.

Hier ist, wie ich es fest:

ich eine Funktion, um eine Markierung zu einem Infofenster zu binden, verwendet.

var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: image, 
      title: office[0], 
      zIndex: office[3] 
     }); 

var contentString = "Hello!!!"; 
var infowindow = new google.maps.InfoWindow; 

bindInfoW(marker, contentString, infowindow); 

} 

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

Hatte genau das gleiche Problem, und diese Lösung funktioniert wie Charme. Danke für das Posten – Ish

+0

Funktioniert super! Wenn Sie Marker in einer Schleife hinzufügen, stellen Sie sicher, dass die Infowindow-Variable außerhalb der Schleife initialisiert wird, sodass das vorherige Fenster geschlossen wird, wenn Sie auf eine neue Markierung klicken. – ChandlerPelhams

Verwandte Themen