Google Maps infoWindow ne charge que le dernier enregistrement sur les marqueurs

Question

J'essaie de charger une carte google avec des marqueurs dynamiques et des infoWindows dynamiques pour les accompagner. Fondamentalement, j'ai les marqueurs qui fonctionnent. Les fenêtres info sont cliquables et fermables, mais elles n'ont pas le bon contenu. Il semble que le contenu de chaque infoWindow est le dernier enregistrement trouvé dans la boucle de requête. Vous verrez ce qu'il se passe here Voici le code:

<script type="text/javascript"> 


//Load the Google Map with Options// 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(42.48019996901214, -90.670166015625); 
    var myOptions = { 
     zoom: 6, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    //Begin query loop to set the markers and infoWindow content// 

    <cfoutput query="GetCoord"> 
    var LatLng = new google.maps.LatLng(#Client_Lat#, #Client_Lng#); 

    var marker = new google.maps.Marker({ 
     position: LatLng, 
     map: map, 
     title: "#Client_Company#" 
    }); 

    var contentString = '<p><b>#Client_Company#</b><br>'+ 
         '#Client_Address#<br>'+ 
         '#Client_City#,&nbsp; #Client_State# &nbsp; #Client_Zip#<br>'+ 
         '<a href="member_detail.cfm?ID=#Client_ID#">View Details</a>'; 

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

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

    }); 
    </cfoutput> 
    //End query loop 
    } 

</script> 

Toutes les idées sur les raisons de ce qui se passe?

Answer 1

Dans votre code, vous définissez statiquement la teneur en infowindow la charge avec

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

Puis, quand vos marqueurs sont cliqués vous ouvrez juste que infowindow

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

ceci affichera le même contenu pour tous les marqueur, vous ne voulez pas cela. Ce que vous voulez faire est de créer un seul infowindow sans contenu (avant votre boucle de marqueur). puis, quand un marqueur est cliqué, attachez le contenu à la fenêtre d'information ... puis ouvrez l'infowindow. Cela sauvera des lignes de code et provoquera la fermeture automatique de l'infowindow.

avant de créer vos marqueurs (avec la boucle) ajouter cette

infowindow = new google.maps.InfoWindow(); 

dans votre code marqueur ajouter l'appel infowindow.setContent

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

}); 

Answer 2

Ajouter content comme une propriété à l'objet marqueur et utiliser this.content dans le gestionnaire d'événements:

var marker = new google.maps.Marker(options); 
marker.content = '<div>Content goes here....</div>'; 

var infoWindow = new google.maps.InfoWindow(); 
google.maps.event.addListener(marker, 'click', function() { 
           infoWindow.setContent(this.content); 
           infoWindow.open(this.getMap(), this); 
          });