-1

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:

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

Fadlan
  • 51
  • 6

1 Answers1

0

I have complemented your code, and marked each new row with //Added row comment.

As Google recommends: "For the best user experience, only one info window should be open on the map at any one time..." See here: https://developers.google.com/maps/documentation/javascript/infowindows#add

So in this code only one info window is used and clicking on the marker the infowindow's content changes.

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 
  }

}

Hope this helps!

MKiss
  • 746
  • 4
  • 7