Google Maps v3 API JS async - multiple markers infowindow Wordpress

admin

Administrator
Staff member
I'm trying to add info window for each of the markers.

I've tried a lot of ideas, but none work.

I'm working on wordpress and I have no idea if this could break code.

This is what I have now and is working:

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

I've tried google code but it's not going to work with multiple markers.

Thanks in advance.