Javascript 自定义信息窗口内容>；谷歌地图

我正在制作一个使用谷歌地图API的位置图。预期的结果是：

具有多个位置的地图（已完成、已测试、按需工作）

定制管脚（完成、测试、按需工作）

---我搞不懂的事情---

信息窗口中的自定义内容（单击pin，信息窗口将打开，其中包含姓名、地址等内容。）

位置列表中的链接，用于定位地图并打开“信息”窗口

到目前为止：

函数初始化（）{
变量myOptions={
缩放：11，
中心：新的google.maps.LatLng（-33.80254451.20203），
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
设置标记（地图，藤本植物）；
}
var lianaLocations=[
['1', -33.750829,151.24086, 1],
['2', -33.846405,151.211677, 2],
['3', -33.876321,151.241171, 3],
['4', -33.871511,151.159599, 4],
['5', -33.901535,151.161743, 5],
['5', -33.676461,151.304244, 6]
];
功能设置标记（地图、位置）{
var image=new google.maps.MarkerImage（'images/icon\u mapPin.png'，
新google.maps.Size（30,40），
新google.maps.Point（0,0），
新的google.maps.Point（0,40））；
var shadow=new google.maps.MarkerImage（'images/icon\u mapPin\u shadow.png'，
新谷歌地图尺寸（26,20），
新google.maps.Point（0,0），
新的google.maps.Point（-13,21））；
变量形状={
坐标：[1,1,1,40,30,40,30,1]，
类型：“poly”
};
对于（变量i=0；i

我正在使用V3。。。如果有关系的话

我知道我还差一点。如有任何协助或指示，将不胜感激

提前谢谢

---

@rrfive

因此，您想要做的是有一个信息窗口，但它为每个标记获取不同的内容。i、 e.内容及其位置随用户点击而变化。因此，在创建标记的循环中，还需要创建信息窗口。但是，您需要将其分离到另一个函数，否则最终会出现这样的情况，即每个信息窗口只包含最后一个标记的内容

function setMarkers(map, locations) {
  ...
  var infowindow =  new google.maps.InfoWindow({
    content: ''
  });

  for (var i = 0; i < locations.length; i++) {
    var liana = locations[i];
    var myLatLng = new google.maps.LatLng(liana[1], liana[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: liana[0],
      zIndex: liana[3]
    });

    // add an event listener for this marker
    bindInfoWindow(marker, map, infowindow, "<p>" + liana[0] + "</p>");
  }
}

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
} 

功能设置标记（地图、位置）{
...
var infowindow=new google.maps.infowindow({
内容：“”
});
对于（变量i=0；i”）；
}
}
函数bindInfoWindow（标记、地图、infowindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
} 

我不确定您从何处获取地址详细信息-在我的示例中，我只是使用您传递给“title”属性的数组的同一部分，然后在信息窗口中显示该属性。可能您必须使用查找每个latLng的地址，然后它可能是数组中的一个附加列

更新：如果需要像单击标记一样使用普通链接触发器，则需要将标记放入数组（将其设为全局变量，在创建标记后将其推入数组）。单击一个链接调用一个javascript函数，传入一个数字以标识数组中要使用的元素。然后你“触发”点击该标记，例如

<a href="#" onclick="showWindow(0); return false">One</a>
<a href="#" onclick="showWindow(1); return false">Two</a>

function showWindow(id) {
    google.maps.event.trigger(markersArray[id], 'click');
}

功能显示窗口（id）{
google.maps.event.trigger（markersArray[id]，'click'）；
}

因此，您想要做的是拥有一个信息窗口，但它为每个标记获取不同的内容。i、 e.内容及其位置随用户点击而变化。因此，在创建标记的循环中，还需要创建信息窗口。但是，您需要将其分离到另一个函数，否则最终会出现这样的情况，即每个信息窗口只包含最后一个标记的内容

function setMarkers(map, locations) {
  ...
  var infowindow =  new google.maps.InfoWindow({
    content: ''
  });

  for (var i = 0; i < locations.length; i++) {
    var liana = locations[i];
    var myLatLng = new google.maps.LatLng(liana[1], liana[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: liana[0],
      zIndex: liana[3]
    });

    // add an event listener for this marker
    bindInfoWindow(marker, map, infowindow, "<p>" + liana[0] + "</p>");
  }
}

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
} 

功能设置标记（地图、位置）{
...
var infowindow=new google.maps.infowindow({
内容：“”
});
对于（变量i=0；i”）；
}
}
函数bindInfoWindow（标记、地图、infowindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
} 

我不确定您从何处获取地址详细信息-在我的示例中，我只是使用您传递给“title”属性的数组的同一部分，然后在信息窗口中显示该属性。可能您必须使用查找每个latLng的地址，然后它可能是数组中的一个附加列

更新：如果需要像单击标记一样使用普通链接触发器，则需要将标记放入数组（将其设为全局变量，在创建标记后将其推入数组）。单击一个链接调用一个javascript函数，传入一个numb