Closing info windows in google maps by clicking the map?

I'm making a mobile web app.

Part of the app drops several markers, which can be clicked to open info windows. It irritates me that these do not go away if you continue using the map without acknowledging them, as in the iOS maps app.

Is there a way to set it so that if the user clicks the underlying map, all open info windows are closed?

add listener to map's click event and close infoboxes in its handler

google.maps.event.addListener(map, "click", function(event) {
    for (var i = 0; i < ibArray.length; i++ ) {  //I assume you have your infoboxes in some array
         ibArray[i].close();
    }
});

I do that on typical websites, but don't see any reason it wouldn't work on mobile

Info Windows | Maps JavaScript API, InfoWindow({ content : $marker.html() }); // show info window when marker is clicked google.maps.event.addListener(marker, 'click', function()  Close an info window. By default, an InfoWindow remains open until the user clicks the close control (a cross at top right of the info window). If you wish, you can close the info window explicitly by calling its close() method. Move an info window. There are a couple of ways to change the location of an info window:

Try this:

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

It is quite simple an should work as well.

Google Map infoWindow.close(), ALSO TRIED ADDING IT IN THE ABOVE FOR FUNCTION (2ND) google.maps.​event.addListener(map, "click", function () { infoWindow.close(); }); Answer (1 of 3): 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

google.maps.event.addListener(marker, 'click', function() {
    if(!marker.open){
        infoWindow.open(map,marker);
        marker.open = true;
    }
    else{
        infoWindow.close();
        marker.open = false;
    }
    google.maps.event.addListener(map, 'click', function() {
        infoWindow.close();
        marker.open = false;
    });
});

Works perfectly

Remove info window when clicked outside, i am using api v3 for googlemaps and i have an issue, close the infowindow, and then clicks on another marker. closed by click on map. As mentioned in the previous section on info windows, an info window is not a live view. Instead, the view is rendered as an image on the map. As a result, any listeners you set on the view are disregarded and you cannot distinguish between click events on various parts of the view.

I noticed some problems with the other answers.

Answer of Marcus Rommel and slawekwin:

When a marker is clicked, the map click event is fired afterwards. So when marker click opens the window, the propagation of the click event to map will close the window again immediately.

Answer of user1724001:

Creating a listener everytime a marker is clicked is also not a good idea. This pollutes the memory.

Therefore i just want to add some additional information to the first answers, to stop event propagation to the map. The Windows will then only be closed, if no marker is clicked.

marker.addListener("click", function(event) {
    // open your window here
    event.stopPropagation(); // this prevents propagation of marker click to map click
});

map.addListener("click", function() {
    // close your window
});

V3 How to close all infowindows before opening , marker.addListener('click', function() {. info.close();. info.setContent(geoCords.​content);. info.open(map, marker);. }); Unfortunately, other open  Find local businesses, view maps and get driving directions in Google Maps. When you have eliminated the JavaScript , whatever remains must be an empty page. Enable JavaScript to see Google Maps.

Google Maps API: Onclick on marker close infoWindow of other , Using the Google Maps API, I'm trying to add another field to the addListener('​click', function () { closeOtherInfo(); infowindow.open(marker.get('map'), marker); InforObj[0] = infowindow; }); } } function closeOtherInfo() { if (InforObj.length > 0) { InforObj[0].set("marker", null); /* and close it */ InforObj[0].close();  function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: {lat: -25.363882, lng: 131.044922 } }); var bounds = { north

Google Maps: close infowindow, Hi, How can i close infowindom in google map when click out side the marker. Simple Click Events; Using Closures in Event Listeners; Accessing Arguments in UI Events; Getting Properties With Event Handlers; Getting Lat/Lng from a Click Event

Google Maps API, We will add a handler for the click event that will open an info window and display text that we've encoded as + 'My Hometown</a>' }; var infoWindow = new google.maps. Pay close attention to the two pairs of quotes used in this statement. addListener(marker, 'click', function() { infoWindow.open(map, marker); });. At the top ( after (function($) {) add var infoWindows = new Array(); , after which you can use the above infoWindows.push(infoWindow); and //close all part to push to and loop through the array. Make sure to double check the upper/lower case W in infowindow/infoWindows.

Comments
  • Also map.addListener("click", function(event) {... works
  • This answer is not the best solution, check out Marcus Rommel's answer. You don't create multiple infoWindows, you create one and then populate it based on which marker you click, so you don't need to use some loop to close them all. There's a way easier solution.
  • This should be the accepted answer! Works like a charm!
  • Yes, I agree to above comment.
  • It worth to say that this code needs to be inside the marker event listener function google.maps.event.addListener(marker, 'click', function() {, coz i spent sometime trying to make it work without knowing it should be there. Thanks.
  • This is the only answer working for me with the exception of 'infowindow' is now 'infoWindow'.
  • This answer bind a listener everytime you open the marker. Add some console.log() and you'll see that it is fired more and more...
  • This does not work anymore. marker.addListener("click" doesn't get an event parameter anymore. The stopPropagation is not needed anymore either, google maps does it by default.
  • Actually Marcus Rommel solution does work. He adds a listener to the 'map' to close the infowindow. The listener to open the infowindow is on the 'marker'.