谷歌地图API v3添加多个标记w /信息窗口w /自定义文本 [英] Google Maps API v3 adding multiple markers w/ info windows w/ custom text

问题描述

我正在为挪威遇难的骑车人制作一个网站。对于我的项目，我一直使用谷歌地图api v3，但我对JavaScript有模糊的熟悉度。您可以在此处看到我的结果： http://salamatstudios.com/googlemapstest/

I am making a website over cyclists killed in Norway. For my project I have been using google maps api v3, but I have vague familiarity with javascript. You can see my result so far here: http://salamatstudios.com/googlemapstest/

基本上，我想每个都有多个infowindows标记。每个infowindows将包含：
姓名（年龄），
位置，
死亡日期，
阅读更多内容（将链接到网站上的一个页面） 。

Basicly I want to have multiple markers with infowindows on each one. Each one of the infowindows will contain: Name (age), Location, Date of death, Read more (which will be linked to a page on the website itself).

像这样的例子： http://salamatstudios.com/bicycles/

我试着用一个标记和infowindow工作，而且工作得很好。当我想在自己的信息窗口中添加新的标记时，我会卡住。目前，我在第一个链接中看到了不同位置的3个标记，但当单击标记时，没有任何信息窗口出现。

I tried working with just one marker and infowindow and that worked just fine. When I want to add new markers with custom info windows on each I get stuck. At the moment I have 3 markers on different locations as seen in the first link, but none of the info windows appear when I click the marker..

我该如何去在它周围编码以便infowindows出现？我如何在每个infowindow中都有自定义文本？完成后，我将在地图上显示30-40个标记。所有的信息窗口将有不同类型的信息。

How do I go around it to code it so the infowindows appear? And how can I have custom text in every infowindow? I am going to have about 30-40 markers on the map when it is done. All of the info windows will have different types of information.

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

如果有人能给我一个线索，那将会很棒。我尝试了一下搜索，但我找不到我的答案。提前致谢！ ： - ）

Would be great if some could give me a clue. I've tried searching around a bit, but I can't really find my answer. Thanks in advance! :-)

推荐答案

您需要将infowindow附加到正确的标记。目前，它们都与标记相关联，该标记不存在（并且在您点击标记时在javascript控制台中应该会导致错误消息）。

You need to attach the infowindow to the correct markers. Currently they are all associated with "marker", which doesn't exist (and should cause an error message in the javascript console when you click on the markers).

里面点击侦听器更改：

Inside the click listener change:

infowindow1.open(map, marker);

infowindow2.open(map, marker);

infowindow3.open(map, marker);

收件人：

infowindow1.open(map, marker1);

infowindow2.open(map, marker2);

infowindow3.open(map, marker3);

工作示例

这篇关于谷歌地图API v3添加多个标记w /信息窗口w /自定义文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！