API di Google Maps v3 aggiungendo più marcatori con informazioni windows w/testo personalizzato

Question

Sto creando un sito Web sui ciclisti uccisi in Norvegia. Per il mio progetto ho utilizzato google maps api v3, ma ho una vaga familiarità con javascript. È possibile vedere il risultato fino a questo punto: http://salamatstudios.com/googlemapstest/

In linea di principio voglio avere più indicatori con infowindows su ciascuno. Ciascuna delle infowindows conterrà: Nome (età), Ubicazione, Data di morte, Ulteriori informazioni (che saranno collegate a una pagina sul sito web stesso).

come in questo esempio qui: http://salamatstudios.com/bicycles/

ho provato a lavorare con un solo marcatore e infowindow e che ha funzionato bene. Quando voglio aggiungere nuovi marcatori con finestre di informazioni personalizzate su ciascuno mi blocco. Al momento ho 3 marcatori in posizioni diverse come visto nel primo link, ma nessuna finestra informativa appare quando faccio clic sul marker.

Come faccio a girarlo per codificarlo in modo da far apparire le infowindows? E come posso avere un testo personalizzato in ogni finestra? Avrò circa 30-40 segnalini sulla mappa quando sarà finito. Tutte le finestre informative avranno diversi tipi di informazioni.

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

Sarebbe bello se qualcuno potesse darmi un indizio. Ho provato a cercare un po ', ma non riesco a trovare la mia risposta. Grazie in anticipo! :-)

Answer 1

È necessario collegare la finestra in basso ai contrassegni corretti. Attualmente sono tutti associati a "marker", che non esiste (e dovrebbe causare un messaggio di errore nella console javascript quando si fa clic sui marker).

All'interno del cambiamento click ascoltatore:

infowindow1.open(map, marker); 

infowindow2.open(map, marker); 

infowindow3.open(map, marker); 

A:

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

modifica

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

Answer 3

Oltre a HoangHieu rispondere, quando si utilizza per il ciclo è meglio usarlo in questo modo:

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

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