CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
leo
leo

Reputation: 3055

Have just one InfoWindow open in Google Maps API v3

I need to have only one InfoWindow open on my Google Map. I need to close all other InfoWindows before I open a new one.

Can someone show me how to do this?

Upvotes: 90

Views: 75402

Answers (12)

Jens Törnell
Jens Törnell

Reputation: 24798

My approach allows you to toggle the infoWindow as well.

Global space

var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(contentString);

var lastInfoWindow;

Local space

marker.addListener("click", (e) => {
  if (lastInfoWindow === e.domEvent.srcElement) {
    infoWindow.close();
    lastInfoWindow = null;
  } else {
    infoWindow.open({
      anchor: marker,
      map,
      shouldFocus: false,
    });
    lastInfoWindow = e.domEvent.srcElement;
  }
});

Upvotes: 0

Hugo Trial
Hugo Trial

Reputation: 396

One smart easy way to do this with jQuery is the following :

            google.maps.event.addListener(marker, 'click', function (e) {
                jQuery(".gm-ui-hover-effect").click();
                marker.info.open(map, this);
            });

It will click on all the closing buttons amongst your tooltips.

Upvotes: 0

IgniteCoders
IgniteCoders

Reputation: 4990

Declare a globar var selectedInfoWindow; and use it to hold the opened info window:

var infoWindow = new google.maps.InfoWindow({
    content: content
});

// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
    //Check if there some info window selected and if is opened then close it
    if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
        selectedInfoWindow.close();
        //If the clicked window is the selected window, deselect it and return
        if (selectedInfoWindow == infoWindow) {
            selectedInfoWindow = null;
            return;
        }
    }
    //If arrive here, that mean you should open the new info window 
    //because is different from the selected
    selectedInfoWindow = infoWindow;
    selectedInfoWindow.open(map, marker);
});

Upvotes: 4

Bilal Boulaich
Bilal Boulaich

Reputation: 31

Solved it this way:

function window(content){
    google.maps.event.addListener(marker,'click', (function(){
        infowindow.close();
        infowindow = new google.maps.InfoWindow({
            content: content
        });
        infowindow.open(map, this);
    }))
}
window(contentHtml);

Upvotes: -1

Jortx
Jortx

Reputation: 727

Here is a solution that doesn't need to create only one infoWindow to reuse it. You can continue creating many infoWindows, the only thing you need is to build a closeAllInfoWindows function, and call it before open a new infowindow. So, keeping your code, you just need to:

  1. Create a global array to store all the infoWindows

    var infoWindows = [];

  2. Store each new infoWindow in the array, just after the infoWindow = new...

    infoWindows.push(infoWindow);

  3. Create the closeAllInfoWindows function

    function closeAllInfoWindows() {
    for (var i=0;i<infoWindows.length;i++) {
        infoWindows[i].close();
    }
}

  4. In your code, call to closeAllInfoWindows() just before open the infoWindow.

Regards,

Upvotes: 0

Daniel Vassallo
Daniel Vassallo

Reputation: 344521

You need to create just one InfoWindow object, keep a reference to it, and reuse if for all the markers. Quoting from the Google Maps API Docs:

If you only want one info window to display at a time (as is the behavior on Google Maps), you need only create one info window, which you can reassign to different locations or markers upon map events (such as user clicks).

Therefore, you may simply want to create the InfoWindow object just after you initialize your map, and then handle the click event handlers of your markers as follows. Let's say you have a marker called someMarker:

google.maps.event.addListener(someMarker, 'click', function() {
   infowindow.setContent('Hello World');
   infowindow.open(map, this);
});

Then the InfoWindow should automatically close when you click on a new marker without having to call the close() method.

Upvotes: 160

user2827958
user2827958

Reputation: 357

a tad late, but I managed to have only one infowindow open by maken infowindow a global variable. 

var infowindow = new google.maps.InfoWindow({});

then inside the listner

infowindow.close();
infowindow = new google.maps.InfoWindow({   
    content: '<h1>'+arrondissement+'</h1>'+ gemeentesFiltered                           
});

infowindow.open(map, this);

Upvotes: 6

Tim Vermaelen
Tim Vermaelen

Reputation: 7069

Basically you want one function that keeps reference to one new InfoBox() => delegate the onclick event. While creating your markers (in a loop) use bindInfoBox(xhr, map, marker);

// @param(project): xhr : data for infoBox template
// @param(map): object : google.maps.map
// @param(marker): object : google.maps.marker
bindInfoBox: (function () {
    var options = $.extend({}, cfg.infoBoxOptions, { pixelOffset: new google.maps.Size(-450, -30) }),
        infoBox = new window.InfoBox(options);

    return function (project, map, marker) {
        var tpl = renderTemplate(project, cfg.infoBoxTpl); // similar to Mustache, Handlebars

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

var infoBox is assigned asynchronously and kept in memory. Every time you call bindInfoBox() the return function will be called instead. Also handy to pass the infoBoxOptions only once!

In my example I've had to add an extra param to the map as my initialization is delayed by tab events.

InfoBoxOptions

Upvotes: 0

Ferenc Takacs
Ferenc Takacs

Reputation: 597

I had the same problem but the best answer didn't solve it completely, what I had to do in my for statement was using the this relating to my current marker. Maybe this helps someone.

for(var i = 0; i < markers.length; i++){
    name = markers[i].getAttribute("name");
    address = markers[i].getAttribute("address");        
    point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));                                     
    contentString = '<div style="font-family: Lucida Grande, Arial, sans-serif;>'+'<div><b>'+ name +'</b></div>'+'<div>'+ address +'</div>';                    
    marker = new google.maps.Marker({                       
        map: map,
        position: point,
        title: name+" "+address,
        buborek: contentString 
    });                                     
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.setContent(this.buborek); 
        infowindow.open(map,this); 
    });                                                         
    marker.setMap(map);                 
}

Upvotes: 14

RedBlueThing
RedBlueThing

Reputation: 42532

You need to keep track of your previous InfoWindow object and call the close method on it when you handle the click event on a new marker.

N.B It is not necessary to call close on the shared info window object, calling open with a different marker will automatically close the original. See Daniel's answer for details.

Upvotes: 0

skarE
skarE

Reputation: 5890

Create your infowindow out of the scope so that you can share it.

Here is a simple example:

var markers = [AnArrayOfMarkers];
var infowindow = new google.maps.InfoWindow();

for (var i = 0, marker; marker = markers[i]; i++) {
  google.maps.event.addListener(marker, 'click', function(e) {
    infowindow.setContent('Marker position: ' + this.getPosition());
    infowindow.open(map, this);
  });
}

Upvotes: 31

Kimmo Puputti
Kimmo Puputti

Reputation: 256

Google Maps allows you to only have one info window open. So if you open a new window, then the other one closes automatically.

Upvotes: -6

Related Questions