Russ Russ - 1 year ago 124
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({
map: map

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

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

google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(content);, 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
    at the end of
    do since as far as I can see the content has already been set within the


Answer Source

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>");, marker);
  // 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

  padding: 10px;
<script src=""></script>
<div id="map-canvas"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download