Close all infowindows in Google Maps API v3
For loops that creates infowindows
dynamically, declare a global variable
var openwindow;
and then in the addListener
function call (which is within the loop):
google.maps.event.addListener(marker<?php echo $id; ?>, 'click', function() {
if(openwindow){
eval(openwindow).close();
}
openwindow="myInfoWindow<?php echo $id; ?>";
myInfoWindow<?php echo $id; ?>.open(map, marker<?php echo $id; ?>);
});
I had a dynamic loop that was creating the infowindows
and markers based on how many were input into the CMS, so I didn't want to create a new InfoWindow()
on every event click and bog it down with requests, if that ever arose. Instead, I tried to know what the specific infowindow
variable for each instance was going to be out of the set amount of locations I had, and then prompt Maps to close all of them before it opened the correct one.
My array of locations was called locations, so the PHP I set up before the actual maps initilization to get my infowindow
variable names was:
for($k = 0; $k < count($locations); $k++) {
$infowindows[] = 'infowindow' . $k;
}
Then after initialzing the map and so forth, in the script I had a PHP foreach
loop creating the dynamic info windows using a counter:
//...javascript map initilization
<?php
$i=0;
foreach($locations as $location) {
..//get latitudes, longitude, image, etc...
echo 'var mapMarker' . $i . ' = new google.maps.Marker({
position: myLatLng' . $i . ',
map: map,
icon: image
});';
echo 'var contentString' . $i . ' = "<h1>' . $title[$i] . '</h1><h2>' . $address[$i] . '</h2>' . $content[$i] . '";';
echo 'infowindow' . $i . ' = new google.maps.InfoWindow({ ';
echo ' content: contentString' . $i . '
});';
echo 'google.maps.event.addListener(mapMarker' . $i . ', "click", function() { ';
foreach($infowindows as $window) {
echo $window . '.close();';
}
echo 'infowindow' . $i . '.open(map,mapMarker'. $i . ');
});';
$i++;
}
?>
...//continue with Maps script...
So, the point is, before I called the entire map script, I had an array with the names I knew were going to be outputted when an InfoWindow()
was created, like infowindow0, infowindow1, infowindow2, etc...
Then, on the click
event for each marker, the foreach
loop goes through and says close all of them before you follow through with the next step of opening them. It turns out looking like this:
google.maps.event.addListener(mapMarker0, "click", function() {
infowindow0.close();
infowindow1.close();
infowindow2.close();
infowindow0.open(map,mapMarker0);
}
Just a different way of doing things I suppose... but I hope it helps someone.
infowindow is local variable and window is not available at time of close()
var latlng = new google.maps.LatLng(-34.397, 150.644);
var infowindow = null;
...
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow();
...
});
...
Declare global variables:
var mapOptions;
var map;
var infowindow;
var marker;
var contentString;
var image;
In intialize
use the map's addEvent
method:
google.maps.event.addListener(map, 'click', function() {
if (infowindow) {
infowindow.close();
}
});