Javascript 谷歌地图v3 API JS异步-多标记信息窗口Wordpress

我正在尝试为每个标记添加信息窗口

我尝试过很多想法，但都不管用

我正在开发wordpress，我不知道这是否会破坏代码

这就是我现在拥有并正在工作的东西：

    <script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('mapa'), {
      center: {lat: 52.1215094, lng: 18.8437753},
      zoom: 6
    });


    setMarkers(map);

  }

  var miasta_sklepy = [
  ['Tarnów', 50.0127817,20.987874,1],
  ['Kraków', 50.0528216,19.9240789,2],
  ['Końskie', 51.1915271,20.4060444, 3]
  ]

  function setMarkers(map){
      var image = {
          url: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/shop-icon.png',
          size: new google.maps.Size(32, 32),
          origin: new google.maps.Point(0,0),
          anchor: new google.maps.Point(16, 16)
      };
      var shape = {
          coords: [0,0,0,32,32,32,32,0],
          type: 'poly'
      };

      for (var i=0; i < miasta_sklepy.length; i++){
          var miasto_sklep = miasta_sklepy[i];
          var marker = new google.maps.Marker({
            position: {lat: miasto_sklep[1], lng:miasto_sklep[2]},
            map: map,
            icon: image,
            shape: shape,
            title: miasto_sklep[0],
            zIndex: miasto_sklep[3]


          });
      }

  }




</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=Ihavemykeyhere&callback=initMap" type="text/javascript"></script>

var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'mapa'）{
中心：{lat:52.1215094，lng:18.8437753}，
缩放：6
});
设置标记（地图）；
}
var miasta_sklepy=[
[Tarnów'，50.0127817,20.987874,1]，
[Kraków'，50.0528216,19.9240789,2]，
[Końskie'，51.1915271,20.4060444,3]
]
函数设置标记（map）{
变量图像={
网址：'http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/shop-icon.png',
大小：新的google.maps.size（32,32），
来源：新google.maps.Point（0,0），
主持人：新谷歌地图点（16,16）
};
变量形状={
坐标：[0,0,0,32,32,32,32,0]，
类型：“poly”
};
对于（变量i=0；i

我试过谷歌代码，但它不会与多个标记一起工作

---

提前感谢。

我已经补充了您的代码，并在每一行添加了注释

正如谷歌所建议的：“为了获得最佳的用户体验，在任何时候地图上都只能打开一个信息窗口……”请参见此处：

因此，在这段代码中，只使用了一个信息窗口，点击标记，信息窗口的内容就会改变

var map;
var infowindow; //Added row
var markers = []; //Added row
function initMap() {
map = new google.maps.Map(document.getElementById('mapa'), {
    center: {lat: 52.1215094, lng: 18.8437753},
    zoom: 6
});

infowindow = new google.maps.InfoWindow(); //Added row
setMarkers(map);

}

var miasta_sklepy = [
['Tarnów', 50.0127817,20.987874,1],
['Kraków', 50.0528216,19.9240789,2],
['Końskie', 51.1915271,20.4060444, 3]
]

function setMarkers(map){
  var image = {
      url: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/shop-icon.png',
      size: new google.maps.Size(32, 32),
      origin: new google.maps.Point(0,0),
      anchor: new google.maps.Point(16, 16)
  };
  var shape = {
      coords: [0,0,0,32,32,32,32,0],
      type: 'poly'
  };

  for (var i=0; i < miasta_sklepy.length; i++){
      var miasto_sklep = miasta_sklepy[i];
      var marker = new google.maps.Marker({
        position: {lat: miasto_sklep[1], lng:miasto_sklep[2]},
        map: map,
        icon: image,
        shape: shape,
        title: miasto_sklep[0],
        zIndex: miasto_sklep[3]
      });
      markers.push(marker); //Added row
      google.maps.event.addListener(marker, 'click', (function(marker, i) { //Added row
        return function() {                                                 //Added row
            infowindow.setContent(miasta_sklepy[i][0]);                     //Added row
            infowindow.open(map, marker);                                   //Added row
        }                                                                   //Added row
        })(marker, i));                                                     //Added row 
  }

}

var映射；
var信息窗口//新增行
var标记=[]//新增行
函数initMap（）{
map=new google.maps.map（document.getElementById（'mapa'）{
中心：{lat:52.1215094，lng:18.8437753}，
缩放：6
});
infowindow=新建google.maps.infowindow（）；//添加了行
设置标记（地图）；
}
var miasta_sklepy=[
[Tarnów'，50.0127817,20.987874,1]，
[Kraków'，50.0528216,19.9240789,2]，
[Końskie'，51.1915271,20.4060444,3]
]
函数设置标记（map）{
变量图像={
网址：'http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/shop-icon.png',
大小：新的google.maps.size（32,32），
来源：新google.maps.Point（0,0），
主持人：新谷歌地图点（16,16）
};
变量形状={
坐标：[0,0,0,32,32,32,32,0]，
类型：“poly”
};
对于（变量i=0；i

---

希望这有帮助

谢谢，我会尽快把它放到我的网站上，这看起来很有希望。