Google Maps v3 API JS非同期 - 複数マーカーのインフォボックス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> 

私はGoogleのコードを試みたが、複数のマーカーで仕事に行くのではありません。

ありがとうございます。

Answer 1

私はあなたのコードを補完し、新しい行に//Added rowのコメントを付けました。このコード一つだけ情報ウィンドウでそうhttps://developers.google.com/maps/documentation/javascript/infowindows#add

さ：

Googleが推奨していますように、「最高のユーザーエクスペリエンスのために、唯一の情報ウィンドウが一度に地図上の開いている必要があります...」ここを参照してください。マーカーを使用してクリックすると、情報ウィンドウのコンテンツが変更されます。

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 
    } 

} 

希望します。