Russ Russ - 3 months ago 15
Javascript Question

Google map API v3 - Add multiple infowindows

I've got a working section of google maps javascript, I did have a problem.

Now the issue I had was that only one infowindow was showing up, the last. I found a solution on another stack thread that worked out. But I couldn't really work out why. I'm fairly new to Javascript so I was hoping someone could explain to me what changed and how.

Here is the working code:

function setMarkers(map, locations){
for(var i = 0; i < locations.length; i++){
var marker = locations[i];
var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
var content = locations[i][0];
var infowindow = new google.maps.InfoWindow();

marker = new google.maps.Marker({
position:latLng,
map: map
});

google.maps.event.addListener(marker, 'click', function(content){
return function(){
infowindow.setContent(content);
infowindow.open(map, this);
}
}(content));
}
}


Here is the original broken code was (I'll paste only that which changed):

google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(content);
infowindow.open(map, marker);
});


Now what I'd like to know if you'd be so kind, is:


  1. what function does the return fn serve, and

  2. what does the added
    (content)
    at the end of
    addListener
    (}(content));)
    do since as far as I can see the content has already been set within the
    setContent
    property.



Thank-you!

Answer

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 just assign it's content relative to the clicked marker

var locations = [
  ["Split",     43.5148515, 16.4490835],
  ["Zagreb",    45.840196,  15.9643316],
  ["Dubrovnik", 42.6457256, 18.094058]
];

function initGoogleMap(){

  var infowindow = new google.maps.InfoWindow(); /* SINGLE */
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 4,
      center: new google.maps.LatLng(45, 15)
  });
  
  function placeMarker( loc ) {
    var latLng = new google.maps.LatLng( loc[1], loc[2]);
    var marker = new google.maps.Marker({
      position : latLng,
      map      : map
    });
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.close(); // Close previously opened infowindow
        infowindow.setContent( "<div id='infowindow'>"+ loc[0] +"</div>");
        infowindow.open(map, marker);
    });
  }
  
  // ITERATE ALL LOCATIONS
  // Don't create functions inside for loops
  // therefore refer to a previously created function
  // and pass your iterating location as argument value:
  for(var i=0; i<locations.length; i++) {
    placeMarker( locations[i] );
  } 
  
}
google.maps.event.addDomListener(window, 'load', initGoogleMap);
html, body, #map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

#infowindow{
  padding: 10px;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>