Google Maps API: Onclick on marker close infoWindow of other markers

I have the following code:

var locations = [
  ['Title 1', 41.33847249573162, 19.78838835516433],
  ['Title 2', 41.32992324524446, 19.816238906745866],
];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 41.327546, lng: 19.818698}
  });

  setMarkers(map);
}

function setMarkers(map) {
  for (var i = 0; i < locations.length; i++) {

    var location = locations[i];
    var locationInfowindow = new google.maps.InfoWindow({
      content: 'Test content',
    });

    var marker = new google.maps.Marker({
      position: {lat: location[1], lng: location[2]},
      map: map,
      title: location[0],
      infowindow: locationInfowindow
    });

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

  }
}

When I click different markers, then different info windows open. How can I close all the info windows and open only the one corresponding to the marker I click?

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more

Deactivated User's photo

I've worked last year with the Google Maps API – don't know if something has been changed in the meantime. But I've stored all markers in an array. Based on this, I've called a function in the click callback which iterates over all these markers and close them:

var markers = [];
var locations = [
  ['Title 1', 41.33847249573162, 19.78838835516433],
  ['Title 2', 41.32992324524446, 19.816238906745866],
];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 41.327546, lng: 19.818698}
  });

  setMarkers(map);
}

function setMarkers(map) {
  for (var i = 0; i < locations.length; i++) {

    var location = locations[i];
    var locationInfowindow = new google.maps.InfoWindow({
      content: 'Test content',
    });

    var marker = new google.maps.Marker({
      position: {lat: location[1], lng: location[2]},
      map: map,
      title: location[0],
      infowindow: locationInfowindow
    });

    markers.push(marker);

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

  }
}

function hideAllInfoWindows(map) {
   markers.forEach(function(marker) {
     marker.infowindow.close(map, marker);
  }); 
}
Show +1 replies
Cam McPherson's photo

You sir just saved me a huge amount of time and frustration! Old post but thanks all the same

Brent Johns's photo

Works like a charm with the Toolset Maps module -- thanks a lot for this, finding a fix was driving me nuts.

Didik Kurniawan's photo

put this code at first line

lastWindow=null;

then edit your click listener like this

google.maps.event.addListener(marker, 'click', function() {
       if (lastWindow) lastWindow.close();
       this.infowindow.open(map, this);
       lastWindow=infowindow;
    });
Christian Taylhardat's photo

how would you make each info window have a separate message?

Betamaxx's photo

Another option is to only use a single Infowindow instead of creating an infowindow for each marker. Then whenever another marker is clicked on the infowindow simply moves to the new location with the new content. In this example the updated code would look like this:

var locationInfowindow = new google.maps.InfoWindow();

function setMarkers(map) {
  for (var i = 0; i < locations.length; i++) {

    var location = locations[i];

    var marker = new google.maps.Marker({
      position: {lat: location[1], lng: location[2]},
      map: map,
      title: location[0]
 });

  var content = 'Test Content: '+i;

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

  }
}