Google Maps API V3 Open Show only one InfoWindow at a time and close other InfoWindow

In this article I will explain with example, how to open (show) only one InfoWindow at a time i.e. When one InfoWindow is opened then automatically close the other opened InfoWindows on the Google Map.

Why InfoWindows do not close even when another InfoWindow is opened

The following code snippet uses an array of address locations to populate Google Maps. For more details, please refer my article Google Maps API V3: Populate Google Maps from array of Markers.

To each marker, a click event listener is added to each Google Map marker. Inside the click event handler, the Google Maps InfoWindow is shown with the contents.

Now if you notice inside the click event handler every time a new InfoWindow object is being created and hence when you click another marker the previous InfoWindow remains open.

var markers = [

{

"title": 'Aksa Beach',

"lat": '19.1759668',

"lng": '72.79504659999998',

"description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.'

{

"title": 'Juhu Beach',

"lat": '19.0883595',

"lng": '72.82652380000002',

"description": 'Juhu Beach is one of favourite tourist attractions situated in Mumbai.'

{

"title": 'Girgaum Beach',

"lat": '18.9542149',

"lng": '72.81203529999993',

"description": 'Girgaum Beach commonly known as just Chaupati is one of the most famous public beaches in Mumbai.'

{

"title": 'Jijamata Udyan',

"lat": '18.979006',

"lng": '72.83388300000001',

"description": 'Jijamata Udyan is situated near Byculla station is famous as Mumbai (Bombay) Zoo.'

{

"title": 'Sanjay Gandhi National Park',

"lat": '19.2147067',

"lng": '72.91062020000004',

"description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.'

}

];

window.onload = function () {

LoadMap();

}

function LoadMap() {

var mapOptions = {

center: new google.maps.LatLng(markers[0].lat, markers[0].lng),

zoom: 10,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

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

var data = markers[i];

var myLatlng = new google.maps.LatLng(data.lat, data.lng);

var marker = new google.maps.Marker({

position: myLatlng,

map: map,

title: data.title

});

//Attach click event to the marker.

(function (marker, data) {

google.maps.event.addListener(marker, "click", function (e) {

//Create and open InfoWindow.

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

//Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.

infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");

infoWindow.open(map, marker);

});

})(marker, data);

}

</script>

</div>

The following screenshot displays the problem of multiple InfoWindows opened in Google Map

Google Maps API V3: Open (Show) only one InfoWindow at a time and close other InfoWindow

The Solution

The solution to this problem is fairly simple. You just need to create one instance of InfoWindow object so that the same InfoWindow object is used for all markers.