Google Maps v3 API JS異步 - 多個標記infowindow WordPress的

Question

我試圖爲每個標記添加信息窗口。

我試了很多想法，但都沒有工作。

我正在使用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> 

我試過谷歌代碼，但它不會與多個標記工作。

在此先感謝。

Answer 1

我補充了您的代碼，並用//Added row評論標記了每個新行。

隨着谷歌建議：「爲了獲得最佳的用戶體驗，只有一個信息窗口應該是地圖在任何一個時間上打開......」在這裏看到：https://developers.google.com/maps/documentation/javascript/infowindows#add

所以在這個代碼只有一個信息窗口使用並單擊infowindow內容更改的標記。

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 
    } 

} 

希望這有助於！