Google map API v3 - Add multiple infowindows

Don't loop your infowindow...
You need only one instance of the infowindow object.
Move it outside of the loop, same for your functions.
Inside the loop assign its content as relative to the clicked marker

const locations = [
  {lat: 45.840196, lng: 15.964331, name: "Zagreb"},
  {lat: 43.514851, lng: 16.449083, name: "Split"},
  {lat: 42.645725, lng: 18.094058, name: "Dubrovnik"},
];

function initGoogleMap(){

  const infowindow = new google.maps.InfoWindow(); // Only one InfoWindow
  const map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 6,
      center: new google.maps.LatLng(45, 15)
  });
  
  function placeMarker( loc ) {
    const marker = new google.maps.Marker({
      position : new google.maps.LatLng( loc.lat, loc.lng ),
      map : map
    });
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.close(); // Close previously opened infowindow
        infowindow.setContent(`<div id="infowindow">${loc.name}</div>`);
        infowindow.open(map, marker);
    });
  }
  
  // ITERATE ALL LOCATIONS. Pass every location to placeMarker
  locations.forEach( placeMarker );
  
}

google.maps.event.addDomListener(window, 'load', initGoogleMap);
html, body, #map-canvas { height: 100%; margin: 0px; }
#infowindow{ padding: 10px; }
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>

Tags:

Javascript

Google Maps Api 3

Recent Posts