117

On my site, I'm using Google Maps API v3 to place house markers on the map.

The InfoWindows stay open unless you explicitly click the close icon. Meaning, you can have 2+ InfoWindows open at a time if you hover over the map marker.

Question: How do I make it so that only the current active InfoWindow is open and all other InfoWindows are closed? Meaning, no more than 1 InfoWindow will be open at a time?

1
  • 1
    As for me it's better to create just one infowindow and update it (it's content and etc), open and close and eveything. But I am pretty sure this approach isn't always applicable.
    – unorsk
    Commented Aug 21, 2011 at 12:58

12 Answers 12

160

There is a close() function for InfoWindows. Just keep track of the last opened window, and call the close function on it when a new window is created.

2
  • 4
    Upvoted for the suggestion of keeping track of the last opened window only. Looks like a no-brainer, but people forget those things... Commented Jul 19, 2012 at 17:45
  • 1
    I've just used the exact same technique. Thanks Chris. It was necessary for me, because I am using an array of InfoWindow objects instead of just one that cycles through and grabs the pertinent info. Each InfoWindow has its own separately updating information, so I found this technique quite useful. Commented Jul 25, 2012 at 21:56
71

alternative solution for this with using many infowindows: save prev opened infowindow in a variable and then close it when new window opened

var prev_infowindow =false; 
...
base.attachInfo = function(marker, i){
    var infowindow = new google.maps.InfoWindow({
        content: 'yourmarkerinfocontent'
    });

    google.maps.event.addListener(marker, 'click', function(){
        if( prev_infowindow ) {
           prev_infowindow.close();
        }

        prev_infowindow = infowindow;
        infowindow.open(base.map, marker);
    });
}
4
  • 4
    Like this one. Simple to understand and implement Commented Apr 8, 2014 at 12:01
  • 8
    Forgive my naivety, but WTF is base? Commented Apr 17, 2016 at 7:15
  • 1
    I don't understand why it's not the default behavior in Google maps V3 ... Commented Jun 29, 2016 at 9:10
  • 1
    Best and simplest solution I've found so far. thank you! Commented Jul 30, 2018 at 10:17
27
//assuming you have a map called 'map'
var infowindow = new google.maps.InfoWindow();

var latlng1 = new google.maps.LatLng(0,0);
var marker1 = new google.maps.Marker({position:latlng1, map:map});
google.maps.event.addListener(marker1, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #1');//update the content for this marker
        infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it
    }
);
var latlng2 = new google.maps.LatLng(10,10);
var marker2 = new google.maps.Marker({position:latlng2, map:map});
google.maps.event.addListener(marker2, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #2');//update the content for this marker
        infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it
    }
);

This will "move" the info window around to each clicked marker, in effect closing itself, then reopening (and panning to fit the viewport) in its new location. It changes its contents before opening to give the desired effect. Works for n markers.

2
  • 1
    Quick note: repeated calls to infowindow.open() are sufficient; the window doesn't need to be closed first. Commented Aug 23, 2011 at 20:44
  • 3
    @Eric, while you're technically correct, I've noticed a bug that sometimes causes info windows to show up in their last position. Forcing closed first defeats said bug. Commented May 18, 2012 at 22:50
26

Create infowindow and just change its content without needing to keep track of an open one, etc.

var map;
var infowindow = new google.maps.InfoWindow();
...
function createMarker(...) {
var marker = new google.maps.Marker({
     ...,
     descrip: infowindowHtmlContent  
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setOptions({
        content: this.descrip,
        maxWidth:300
    });
    infowindow.open(map, marker);
});
2
  • 3
    That's really elegant - only using a single infowindow and changing the content avoids having to keep track of / close the previous one.
    – Nick F
    Commented Jun 27, 2014 at 11:28
  • This solution is very elegant indeed and works like a charm. +1 Commented May 25, 2016 at 18:02
12

Declare a variable for active window

var activeInfoWindow; 

and bind this code in marker listener

 marker.addListener('click', function () {
    if (activeInfoWindow) { activeInfoWindow.close();}
    infowindow.open(map, marker);
    activeInfoWindow = infowindow;
});
3
  • Thanks, It really works for when clicking anywhere on the map. Commented May 16, 2019 at 7:05
  • Cheers dude, out of all the suggestions, this worked the best for me and is clean AF. Commented May 5, 2020 at 10:10
  • best answer here for GMaps (@angular/google-maps": "^13.2.3) using the native API and with multiple markers, built using the official guides. Commented Mar 30, 2022 at 13:55
9

From this link http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/:

Teo: The easiest way to do this is to just have one instance of the InfoWindow object that you reuse over and over again. That way when you click a new marker the infoWindow is “moved” from where it’s currently at, to point at the new marker.

Use its setContent method to load it with the correct content.

4
  • I don't believe this applies since I'm using Google Maps v3 API
    – Ted
    Commented Feb 8, 2010 at 17:40
  • Plus, the article you linked too does not demo more than 1 marker
    – Ted
    Commented Feb 8, 2010 at 17:42
  • I've used a single infowindow in the same fashion for several sites. Click one, the open one closes automatically. Commented Feb 8, 2010 at 18:04
  • 4
    How do you associate multiple marks with a single InfoWindow?
    – Ted
    Commented Feb 8, 2010 at 18:13
4

There is a easier way besides using the close() function. if you create a variable with the InfoWindow property it closes automatically when you open another.

var info_window;
var map;
var chicago = new google.maps.LatLng(33.84659, -84.35686);

function initialize() {
    var mapOptions = {
        center: chicago,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    info_window = new google.maps.InfoWindow({
        content: 'loading'
    )};

createLocationOnMap('Location Name 1', new google.maps.LatLng(33.84659, -84.35686), '<p><strong>Location Name 1</strong><br/>Address 1</p>');
createLocationOnMap('Location Name 2', new google.maps.LatLng(33.84625, -84.36212), '<p><strong>Location Name 1</strong><br/>Address 2</p>');

}

function createLocationOnMap(titulo, posicao, conteudo) {            
    var m = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        title: titulo,
        position: posicao,
        html: conteudo
    });            

    google.maps.event.addListener(m, 'click', function () {                
        info_window.setContent(this.html);
        info_window.open(map, this);
    });
}
0
2
var map;
var infowindow;
...
function createMarker(...) {
    var marker = new google.maps.Marker({...});
    google.maps.event.addListener(marker, 'click', function() {
        ...
        if (infowindow) {
            infowindow.close();
        };
        infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 300
        });
        infowindow.open(map, marker);
    }
...
function initialize() {
    ...
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    ...
    google.maps.event.addListener(map, 'click', function(event) {
        if (infowindow) {
            infowindow.close();
        };
        ...
    }
}
1
  • Thanx, I needed to close the infowindow when not clicked a marker so just on the map
    – VRC
    Commented Dec 5, 2012 at 10:46
1

How about -

google.maps.event.addListener(yourMarker, 'mouseover', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

google.maps.event.addListener(yourMarker, 'mouseout', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

Then you can just hover over it and it will close itself.

1
  • This is an interesting workaround but it doesn't answer the question and wouldn't work on touch only devices.
    – Lee
    Commented Mar 13, 2020 at 18:21
1

I stored a variable at the top to keep track of which info window is currently open, see below.

var currentInfoWin = null;
google.maps.event.addListener(markers[counter], 'click', function() {      
    if (currentInfoWin !== null) {
        currentInfoWin.close(map, this); 
    }
    this.infoWin.open(map, this); 
    currentInfoWin = this.infoWin;  
}); 
1
  • What is [counter] doing here?
    – Lee
    Commented Mar 13, 2020 at 18:28
0

Here is what I used if you are using many markers in a for loop (Django here). You can set an index on each marker and set that index every time you open a window. Closing the previously saved index:

markers = Array();
infoWindows = Array();
var prev_infowindow =false;
{% for obj in objects %}
var contentString = 'your content'
var infowindow = new google.maps.InfoWindow({
            content: contentString,
          });
var marker = new google.maps.Marker({
               position: {lat: {{ obj.lat }}, lng: {{ obj.lon }}},
               map: map,
               title: '{{ obj.name }}',
               infoWindowIndex : {{ forloop.counter0 }}
          });
google.maps.event.addListener(marker, 'click',
            function(event)
            {
           if( prev_infowindow ) {
               infoWindows[prev_infowindow].close();
                }
                prev_infowindow = this.infoWindowIndex;
                infoWindows[this.infoWindowIndex].open(map, this);
            }
        );

        infoWindows.push(infowindow);
        markers.push(marker);

      {% endfor %}
-1
var contentString = "Location: " + results[1].formatted_address;    
google.maps.event.addListener(marker,'click', (function(){ 
    infowindow.close();
    infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    infowindow.open(map, marker);
}));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.