Google Maps v3 API JS async - mehrere Marker infowindow Wordpress

Question

Ich versuche, Info-Fenster für jeden der Marker hinzuzufügen.

Ich habe viele Ideen ausprobiert, aber keine funktionieren.

Ich arbeite an WordPress und ich habe keine Ahnung, ob das Code brechen könnte. Diese

ist, was ich habe jetzt und arbeitet:

<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> 

ich Google Code versucht haben, aber es wird nicht mit mehreren Markern zur Arbeit zu gehen.

Vielen Dank im Voraus.

Answer 1

Ich habe Ihren Code ergänzt und markiert jede neue Zeile mit //Added row Kommentar.

Wie Google empfiehlt: „Für die beste Nutzer-Erfahrung, nur ein Infofenster sollte zu jeder Zeit auf die Karte offen ...“ Siehe hier: https://developers.google.com/maps/documentation/javascript/infowindows#add

Also in diesem Code nur ein Info-Fenster ist Wenn Sie auf den Marker klicken, ändert sich der Inhalt des Infowindows.

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 
    } 

} 

Hoffe, das hilft!