Javascript Google Maps API v3添加多个标记，带有信息窗口和自定义文本

我正在制作一个关于挪威自行车遇害者的网站。在我的项目中，我一直在使用GoogleMapsAPIv3，但我对javascript还不太熟悉。到目前为止，您可以在这里看到我的结果：

基本上，我希望有多个标记，每个标记上都有信息窗口。每个信息窗口将包含： 姓名（年龄）， 位置， 死亡日期， 阅读更多（将链接到网站本身的页面）

就像这里的例子：

我试着只使用一个标记和信息窗口，效果很好。当我想在每个标签上添加带有自定义信息窗口的新标记时，我会被卡住。目前，我在不同的位置上有3个标记，如第一个链接中所示，但当我单击标记时，没有一个信息窗口出现

我如何对其进行编码以使信息窗口出现？如何在每个信息窗口中都有自定义文本？完成后，我将在地图上有大约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);

函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（65.18303,20.47852），
缩放：5，
mapTypeId:google.maps.mapTypeId.ROADMAP，
//映射控件（开始）
mapTypeControl:true，
泛控制：对，
全控选项：{
位置：google.maps.ControlPosition.TOP\u右
},
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.LARGE，
位置：google.maps.ControlPosition.LEFT_TOP
},
街景控制：对，
街景控制选项：{
位置：google.maps.ControlPosition.LEFT_TOP
},
//映射控件（结束）
};
var map=new google.maps.map（document.getElementById（“map”），
地图选项）；
//------标记1
var marker1=新的google.maps.Marker({
位置：新google.maps.LatLng（59.96384,11.04120），
地图：地图，
图标：“img/bike5.png”
});
//标记1的信息窗口
var infowindow1=新建google.maps.InfoWindow({
内容：“名称
位置
日期

”
});
//信息窗口代码结束
//将单击事件添加到标记
google.maps.event.addListener（marker1，'click'，function（）{
//调用infoWindow的open方法
信息窗口1.打开（地图、标记）；
});
//-----第一个标记结束
//------标记2
var marker2=新的google.maps.Marker({
位置：新google.maps.LatLng（60.63040,8.56102），
地图：地图，
图标：“img/bike5.png”
});
//标记2的信息窗口
var infowindow2=新建google.maps.InfoWindow({
内容：“名称
位置
日期

”
});
//信息窗口代码结束
//将单击事件添加到标记
google.maps.event.addListener（marker2，'click'，function（）{
//调用infoWindow的open方法
信息窗口2.打开（地图、标记）；
});
//-----第二个标记结束
//------标记3
var marker3=新的google.maps.Marker({
位置：新google.maps.LatLng（60.39126,5.32205），
地图：地图，
图标：“img/bike5.png”
});
//标记3的信息窗口
var infowindow3=新建google.maps.InfoWindow({
内容：“名称
位置
日期

”
});
//信息窗口代码结束
//将单击事件添加到标记
google.maps.event.addListener（marker3，'click'，function（）{
//调用infoWindow的open方法
信息窗口3.打开（地图、标记）；
});
//-----第三个标记结束
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

---

如果有人能给我一个线索就好了。我试着四处搜索了一下，但我真的找不到答案。提前感谢！：-）

您需要将信息窗口附加到正确的标记上。目前，它们都与“marker”关联，而“marker”并不存在（当您单击标记时，会在javascript控制台中产生错误消息）

在“单击侦听器更改”对话框中：

infowindow1.open(map, marker);

infowindow2.open(map, marker);

infowindow3.open(map, marker);

致：

改为

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

---

除了HoangHieu答案外，当您使用for循环时，最好以这种方式使用：

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

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

---

哇！这立刻奏效了。非常感谢你。还有什么方法可以让函数在单击下一个标记并打开一个新的infoWindow时关闭上一个infoWindow？你是说like（从中的示例翻译成v3）（我认为这是“v2 infoWindow行为”）？如果一次只想打开一个信息窗口，请为所有标记共享同一个信息窗口。如果这回答了您的问题，请再次感谢！我测试了一段时间，失败了很多，但最终我让它按照我的意愿工作。感谢您的时间，geocodezip:-）对于将来有同样问题的其他人，他们可以看到这一点：这实际上是一种更聪明的方法，而不是实例化

infowindow1

，

infowindow2

，等等。

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

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

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