Google Maps API v3 dodawanie wielu znaczników w/info Windows w/niestandardowy tekst

Question

Robię stronę internetową nad rowerzystami zabitych w Norwegii. Do mojego projektu używam google maps api v3, ale mam niejasną znajomość javascript. Możesz zobaczyć mój wynik do tej pory tutaj: http://salamatstudios.com/googlemapstest/

Po prostu chcę mieć wiele markerów z infowindows na każdym z nich. Każdy z infowindows będzie zawierał: Imię (wiek), Lokalizacja, Data śmierci, Czytaj więcej (co zostanie połączone ze stroną w samej witrynie).

jak w poniższym przykładzie tutaj: http://salamatstudios.com/bicycles/

próbowałem pracować z jednym marker i infowindow i że pracował dobrze. Kiedy chcę dodać nowe markery z niestandardowymi oknami informacyjnymi na każdym z nich, utknę. W tej chwili mam 3 znaczniki w różnych lokalizacjach, jak widać na pierwszym łączu, ale żadne okno informacyjne nie pojawia się po kliknięciu znacznika ..

Jak obejść ten kod, aby pojawiły się okna informacyjne? I jak mogę mieć niestandardowy tekst w każdej infowizie? Po ukończeniu mam zamiar mieć około 30-40 znaczników na mapie. Wszystkie okna informacyjne będą miały różne typy informacji.

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

Byłoby wspaniale, gdyby ktoś mógł dać mi wskazówkę. Próbowałem trochę przeszukać, ale nie mogę znaleźć odpowiedzi. Z góry dziękuję! :-)

Answer 1

Musisz załączyć infowindow do właściwych znaczników. Obecnie wszystkie są powiązane z "znacznikiem", który nie istnieje (i powinien spowodować komunikat o błędzie w konsoli javascript po kliknięciu znaczników).

Wewnątrz zmian kliknij słuchacza:

infowindow1.open(map, marker); 

infowindow2.open(map, marker); 

infowindow3.open(map, marker); 

Do:

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

zmiana

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

Answer 3

Oprócz HoangHieu odpowiedzi podczas korzystania z pętli for to lepiej użyć go w ten sposób:

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

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