Google Maps API v3 Hinzufügen mehrerer Marker mit Infofenstern w/benutzerdefinierten Text

Question

Ich mache eine Website über Radfahrer in Norwegen getötet. Für mein Projekt habe ich Google Maps API v3 verwendet, aber ich habe eine vage Vertrautheit mit Javascript. Sie können mein bisheriges Ergebnis sehen: http://salamatstudios.com/googlemapstest/

Grundsätzlich möchte ich mehrere Marker mit Infowindows auf jedem haben. Jedes der Infofenster enthält: Name (Alter), Standort, Datum des Todes, Lesen Sie mehr (die mit einer Seite auf der Website selbst verknüpft werden).

Wie dieses Beispiel hier: http://salamatstudios.com/bicycles/

ich mit nur einem Marker und Infofenster und versuchte arbeiten funktionierte gut. Wenn ich neue Marker mit benutzerdefinierten Infofenstern auf jedem hinzufügen will, bleibe ich stecken. Im Moment habe ich 3 Markierungen an verschiedenen Stellen wie im ersten Link, aber keine der Infofenster erscheint, wenn ich auf den Marker klicke.

Wie gehe ich es um es zu codieren, damit die Infofenster erscheinen? Und wie kann ich einen benutzerdefinierten Text in jedem Infofenster haben? Ich werde etwa 30 bis 40 Marker auf der Karte haben, wenn es fertig ist. Alle Informationsfenster haben unterschiedliche Arten von Informationen.

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(65.18303, 20.47852), 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 


     // MAP CONTROLS (START) 
     mapTypeControl: true, 

     panControl: true, 
     panControlOptions: { 
     position: google.maps.ControlPosition.TOP_RIGHT 
     }, 

     zoomControl: true, 
     zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.LARGE, 
     position: google.maps.ControlPosition.LEFT_TOP 
     }, 

     streetViewControl: true, 
     streetViewControlOptions: { 
     position: google.maps.ControlPosition.LEFT_TOP 
     }, 
     // MAP CONTROLS (END) 



    }; 
    var map = new google.maps.Map(document.getElementById("map"), 
     mapOptions); 


    // -------------- MARKER 1 
    var marker1 = new google.maps.Marker({ 
    position: new google.maps.LatLng(59.96384, 11.04120), 
    map: map, 
    icon: 'img/bike5.png' 
    }); 


    // MARKER 1'S INFO WINDOW 
    var infowindow1 = new google.maps.InfoWindow({ 
    content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>' 
    }); 
    // End of infowindow code 

    // Adding a click event to the marker 
    google.maps.event.addListener(marker1, 'click', function() { 
    // Calling the open method of the infoWindow 
    infowindow1.open(map, marker); 
    }); 
    // -------- END OF 1st MARKER 


    // -------------- MARKER 2 
    var marker2 = new google.maps.Marker({ 
    position: new google.maps.LatLng(60.63040, 8.56102), 
    map: map, 
    icon: 'img/bike5.png' 
    }); 

    // MARKER 2'S INFO WINDOW 
    var infowindow2 = new google.maps.InfoWindow({ 
    content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>' 
    }); 
    // End of infowindow code 

    // Adding a click event to the marker 
    google.maps.event.addListener(marker2, 'click', function() { 
    // Calling the open method of the infoWindow 
    infowindow2.open(map, marker); 
    }); 
    // -------- END OF 2nd MARKER 


    // -------------- MARKER 3 
    var marker3 = new google.maps.Marker({ 
    position: new google.maps.LatLng(60.39126, 5.32205), 
    map: map, 
    icon: 'img/bike5.png' 
    }); 

    // MARKER 3'S INFO WINDOW 
    var infowindow3 = new google.maps.InfoWindow({ 
    content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>' 
    }); 
    // End of infowindow code 

    // Adding a click event to the marker 
    google.maps.event.addListener(marker3, 'click', function() { 
    // Calling the open method of the infoWindow 
    infowindow3.open(map, marker); 
    }); 
    // -------- END OF 3rd MARKER 


    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

Wäre toll, wenn einige mir einen Hinweis geben könnten. Ich habe versucht, ein wenig herumzusuchen, aber ich kann meine Antwort nicht wirklich finden. Danke im Voraus! :-)

Answer 1

Sie müssen das Infowindow mit den richtigen Markern verbinden. Derzeit sind sie alle mit "marker" verbunden, was nicht existiert (und sollte eine Fehlermeldung in der JavaScript-Konsole verursachen, wenn Sie auf die Marker klicken).

Im Inneren des Klick-Listener ändern:

infowindow1.open(map, marker); 

infowindow2.open(map, marker); 

infowindow3.open(map, marker); 

An:

infowindow1.open(map, marker1); 

infowindow2.open(map, marker2); 

infowindow3.open(map, marker3); 

working example

Answer 2

google.maps.event.addListener(marker1, 'click', function() { 
    // Calling the open method of the infoWindow 
    infowindow1.open(map, marker); 
    }); 

Änderung

google.maps.event.addListener(marker1, 'click', function() { 
    // Calling the open method of the infoWindow 
    infowindow1.open(map, this); 
}); 

Answer 3

Neben HoangHieu Antwort, wenn Sie for-Schleife verwenden es besser, es auf diese Weise zu verwenden:

marker.info = new google.maps.InfoWindow({ 
    content: 'some text' 
}); 

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