Explore Google Maps: Revisiting a single InfoWindow setup

Instead of keeping track of several InfoWindows, we can store the information with each marker and use only one global InfoWindow.

Click here to open

Global variables:

var infowindow;
var count = 0;

Event listener and InfoWindow creation:

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

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

Defining a marker:

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

When clicked, the marker opens the InfoWindow with the current content.

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

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 mapOptions = {
        center: new google.maps.LatLng(0.0, 0.0),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

var infowindow;
      var count = 0;

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

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

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

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

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

Explore Google Maps

Pages

Saturday, March 10, 2012

Revisiting a single InfoWindow setup

No comments:

Post a Comment