Google Maps API v3 dodający wiele znaczników w / oknach informacyjnych w / niestandardowym tekście

Tworzę stronę internetową poświęconą rowerzystom zabitym w Norwegii. W moim projekcie korzystam z google maps api v3, ale mam niejasną znajomość javascript. Możesz zobaczyć mój wynik do tej pory tutaj:http://salamatstudios.com/googlemapstest/

Zasadniczo chcę mieć wiele znaczników z infowindows na każdym z nich. Każde z infowindows będzie zawierać: Imię (wiek), Lokalizacja, Data śmierci, Czytaj więcej (która zostanie połączona ze stroną na samej stronie).

Jak ten przykład tutaj:http://salamatstudios.com/bicycles/

Próbowałem pracować tylko z jednym markerem i infowindow i to działało dobrze. Kiedy chcę dodać nowe znaczniki z niestandardowymi oknami informacyjnymi na każdym z nich, utknę. W tej chwili mam 3 znaczniki w różnych miejscach, jak widać w pierwszym linku, ale żadne okno informacyjne nie pojawia się, gdy klikam znacznik.

Jak się do tego zabrać, aby go zakodować, aby pojawiły się infowindows? A jak mogę mieć własny tekst w każdym oknie informacyjnym? Kiedy to zrobię, będę miał około 30-40 markeró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ś dał mi wskazówkę. Próbowałem trochę przeszukać, ale nie mogę znaleźć odpowiedzi. Z góry dziękuję! :-)

questionAnswers(3)

yourAnswerToTheQuestion