Google Maps Infofenster nur die be-letzten Datensatz auf Markierungen

Ich versuche, laden Sie eine google-Karte mit dynamischen Marker und dynamische infoWindows mit Ihnen zu gehen. Im Grunde habe ich die Marken arbeiten. Die infoWindows sind anklickbar und schließbar, Sie haben jedoch nicht den richtigen Inhalt. Es scheint, dass die Inhalte für jeden Infofenster ist der Letzte Datensatz, der gefunden wird in der Abfrage-Schleife. Sie werden sehen, was passiert hier Hier der 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>

Irgendwelche Ideen auf, warum dies passiert ist?

  • In FF3.6.8, bekomme ich drei map-Marker, die korrekt angezeigt wird, basiert auf dem Quelltext der Seite. Welchen browser haben Sie Probleme mit?
  • Diese drei sind die richtigen Symbole, aber der Inhalt in den infoWindows anders sein SOLLTE. Alle drei sind eigentlich die Inhalte, die Sie den letzten Datensatz in meinem GetCoord Abfrage.
InformationsquelleAutor knawlejj | 2010-08-26
  1. 13

    In Ihrem code, den Sie statisch festgelegt, das Infofenster Inhalte laden mit

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

    Dann, wenn Ihre Marker angeklickt werden, Sie sind nur zur Eröffnung das Infofenster

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

    zeigt den gleichen Inhalt für jeden marker, Sie wollen das nicht.

    was Sie tun möchten, ist erstellen Sie nur ein Infofenster mit ohne Inhalt (bevor Sie Ihre marker loop). dann, wenn Sie einen marker geklickt wird, befestigen Sie den Inhalt des info-Fensters... dann öffnen Sie das Infofenster. Das spart Codezeilen und bewirken, dass das Infofenster zu schließen automatisch.

    bevor Sie Ihre Markierungen (mit der Schleife), fügen Sie diese

    infowindow = new google.maps.InfoWindow();

    in Ihren marker-code fügen Sie das Infofenster.setContent nennen

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

 });
    • Galen, überprüfen Sie meine Antwort oben mit neuen code. Danke!
    • Vielen Dank, ich war vor dem gleichen problem
    • Dies funktionierte nicht für mich. @H. M. die Lösung funktionierte perfekt. Die oben beschriebene Methode gehalten, die Befestigung der Infofenster zu dem letzten marker in meiner Schleife.
    • Dann hast du es falsch
    • Kann ich pass ein Schlüssel dazu? Ich habe das gleiche problem.
    InformationsquelleAutor Galen
  2. 42

    Hinzufügen content als eine Eigenschaft marker-Objekt und verwenden this.content im event-handler:

    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);
                            });
    • Hatte das exakt gleiche situation, nur ein standard-JS-Schleife für ein JSON-Ergebnis aus einem AJAX-request: for (var i = 0; i < Ergebnis.length; i++) { var marker[...] } die einzige Art, wie ich es schaffen konnte, war dies ein (die akzeptierte Antwort funktioniert bei mir nicht).
    • Gleiche wie firepol sagte. Dieser funktioniert wie ein Charme, der akzeptiert die Antwort nicht.
    • Die akzeptierte Antwort nicht für mich arbeiten. Diese Lösung haben. Danke @H. M.
    • Arbeit !100% Erfolg
    • Diese Antwort sollte sein, das akzeptiert man.
    • Jup, funktioniert wie Charme 🙂
    • Dies sollte die akzeptierte Antwort. Versuchte Galen der Lösung ohne Erfolg. Dieser arbeitet
    • Du bist großartig. Danke!!! Wir verbrachten etwa zwei Stunden auf diesem. Dies sollte auf jeden Fall die akzeptierte Antwort ist — Wie im Mai 2016 mindestens.
    • nice 🙂 +1 von mir auch
    • große, +1 für die richtige Lösung
    • Danke für den Hinweis this! 🙂 +1

    InformationsquelleAutor H.M.
Schreibe einen Kommentar