Plusieurs Google Maps infowindow

Question

Actuel J'ai une carte Google qui va afficher des marqueurs sur la carte de ma base de données ... Je voudrais ajouter un infowindow lorsque les utilisateurs cliquent sur le marqueur.

Je l'ai eu pour fonctionner, mais le problème est qu'il affiche seulement sur le dernier marqueur qui a été chargé, pourquoi est-ce?

Voici le code pour générer le marqueur et l'infowindow.

<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> 

Answer 1

J'ai également trébuché sur ce problème.

Voilà comment je l'ai fixé:

J'ai utilisé une fonction pour lier un marqueur à un infowindow.

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); 
     }); 
} 

Answer 2

http://www.codefx.biz/2011/01/google-maps-api-v3-multiple-infowindows

cette façon fonctionne aussi!