谷歌地圖API v3添加多個標記w /信息窗口w /自定義文本

Question

我正在爲在挪威遇難的騎單車者製作一個網站。對於我的項目，我一直使用谷歌地圖api v3，但我對JavaScript有模糊的熟悉度。你可以在這裏看到我的結果：http://salamatstudios.com/googlemapstest/

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

像這個例子在這裏：http://salamatstudios.com/bicycles/

我想只有一個標記，信息窗口和工作的工作就好了。當我想在自己的信息窗口中添加新的標記時，我會卡住。此刻，我在第一個鏈接中看到了不同位置的3個標記，但當單擊標記時，沒有任何信息窗口出現。

如何繞過它來編碼它，以便infowindows顯示？我如何在每個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); 

working example

Answer 2

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

Answer 3

除了HoangHieu答案，當您使用循環能夠更好地使用這種方式：

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

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