Google Maps API v3添加多個標記w / info windows w / custom text

Question

我正在制作一個關於在挪威遇害的騎車人的網站。 對於我的項目，我一直在使用谷歌地圖api v3，但我對javascript有着模糊的熟悉。 您可以在此處查看我的結果： http ： //salamatstudios.com/googlemapstest/

基本上我想在每個標記上都有多個帶有infowindows的標記。 每個infowindows將包含：姓名（年齡），位置，死亡日期，閱讀更多（將鏈接到網站本身的頁面）。

就像這個例子： http ： //salamatstudios.com/bicycles/

我嘗試使用一個標記和infowindow，並且工作得很好。 當我想添加帶有自定義信息窗口的新標記時，我就會卡住。 目前，我在第一個鏈接中看到了不同位置的3個標記，但是當我單擊標記時，沒有任何信息窗口出現。

如何繞過它來編碼它以便出現信息？ 我怎樣才能在每個infowindow中都有自定義文本？ 完成后，我將在地圖上有大約30-40個標記。 所有信息窗口都有不同類型的信息。

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

如果有人能給我一些線索，那將會很棒。 我試過一下，但我找不到答案。 提前致謝！ :-)

Answer 1

您需要將infowindow附加到正確的標記。 目前它們都與“標記”相關聯，而“標記”不存在（當您單擊標記時，應該在javascript控制台中導致錯誤消息）。

在點擊監聽器內部更改：

infowindow1.open(map, marker);

infowindow2.open(map, marker);

infowindow3.open(map, marker);

至：

infowindow1.open(map, marker1);

infowindow2.open(map, marker2);

infowindow3.open(map, marker3);

工作實例

Answer 2

除了HoangHieu答案，當你使用for循環時，最好以這種方式使用它：

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

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

Answer 3

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

改成

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