Infowindow on marker doesn't close(Google maps)

Question

I am using marker infoWindow to display info. It opens properly and does close when clicked somewhere on map.

initMap(){
.................
    map.addListener('click', function () {
        infowindow.close();
    });
}



var infowindow;
.....
.............
function markerPushWithInfoWindow(marker) {
    markers.push(marker);
    infowindow = new google.maps.InfoWindow();
    marker.addListener('click', function () {
        if (infowindow) {
            infowindow.close();
        }
        infowindow.setContent(this.info);
        infowindow.open(map, marker);
    });
}

markerPushWithInfoWindow is called() when marker is drawn during animation. The infoWindow doesn't close(when clicked outside the marker i.e. on map) while the animation is running, it closes only when the animation is paused.

Animation: We fetch the list of position(latitude/longtitude) data from the DB(particular date) and animate it via car.(Replay feature).

What animation? Please provide a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) that demonstrates the issue. — MrUpsidown, Apr 15 '16 at 09:31
And if you are creating one InfoWindow object for each marker... that's probably not the way to go. — MrUpsidown, Apr 15 '16 at 09:32
Yes that's what I meant. Separate for each marker. Why do you do that? Do you need more than one open at a time? — MrUpsidown, Apr 15 '16 at 09:39
I think it is required because there can be multiple markers and each marker contains different info(In infowindow) — Vivek Sadh, Apr 15 '16 at 09:56
Nope. You can create only one object and just `setContent()` on marker click. — MrUpsidown, Apr 15 '16 at 10:28

MrUpsidown · Answer 1 · 2016-04-15T10:45:55.777

Here is an example of how you can create multiple markers in a loop that share a common infowindow. Note the use of the closure on the marker event listener.

function initialize() {

  var mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(1, 1)
  };

  var locations = [
    [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
    [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
    [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
    [new google.maps.LatLng(2, 0), 'Marker 4', 'Infowindow content for Marker 4'],
    [new google.maps.LatLng(2, 1), 'Marker 5', 'Infowindow content for Marker 5'],
    [new google.maps.LatLng(2, 2), 'Marker 6', 'Infowindow content for Marker 6']
  ];

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var infowindow = new google.maps.InfoWindow();

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

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

    var marker = new google.maps.Marker({
      position: locations[i][0],
      map: map,
      title: locations[i][1]
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {

      return function() {
        infowindow.setContent(locations[i][2]);
        infowindow.open(map, marker);
      }

    })(marker, i));
  }
}

initialize();

JSFiddle demo

Edit:

Example without use of closure

JSFiddle demo

Infowindow on marker doesn't close(Google maps)

1 Answers1