Explore Google Maps: Keeping a single InfoWindow open

For a long time I couldn't find a good solution for this scenario: keep multiple markers on the map, with a corresponding InfoWindow assigned to each marker. At most one InfoWindow should stay open. (Here's another way of accomplishing this)

Click here to open

In addition to the map, we declare a global array variable, infowindows. Accessing this variable allows us to close all InfoWindows.

When initializing the map, we add a click listener so we can place markers.

function initialize() {
map = new google.maps.Map($("map_canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function (event) {
addMarker(event.latLng, "InfoWindow index #" + infowindows.length);
});
}

When adding markers, we also add the InfoWindow and its contents at the same time.

function addMarker(pos, content) {
var marker = new google.maps.Marker({
map: map,
position: pos
});

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

infowindows.push(infowindow);

google.maps.event.addListener(marker, 'click', function (event) {
closeInfoWindows();
infowindow.open(map, marker);
});
}

Finally, we define a simple function that closes all InfoWindows. Without an array to keep track of them, we cannot locate the previously opened InfoWindow(s).

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

Full source code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function $(id) { return document.getElementById(id); }
      function print(txt) { $("console").value += txt + "\n"; }
      
      var map;
      var infowindows = [];

var mapOptions = {
        center: new google.maps.LatLng(0.0, 0.0),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

function initialize() {
        map = new google.maps.Map($("map_canvas"), mapOptions);
        google.maps.event.addListener(map, 'click', function (event) {
          addMarker(event.latLng, "InfoWindow index #" + infowindows.length);
        });
      }

function addMarker(pos, content) {
        var marker = new google.maps.Marker({
          map: map,
          position: pos
        });

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

infowindows.push(infowindow);

google.maps.event.addListener(marker, 'click', function (event) {
          closeInfoWindows();
          infowindow.open(map, marker);
        });
      }

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

google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

Explore Google Maps

Pages

Friday, March 2, 2012

Keeping a single InfoWindow open

No comments:

Post a Comment