Google Map Overlays

Jun 11, 2009 by d0rr    No Comments    Posted under: Web Development

Google Maps has made its presence for quite some time now, and we have seen many sites utilizing it for various purposes. This includes SinGeo and maplandia.com.

In this post, I would like to talk about the indepth of how we can overlay multiple maps in one display, and allowing to toggle between maps in real-time, all these with the available functions of addOverlay(), removeOverlay(), and clearOverlays().

I would assume that you have already known the basic of Google Maps. If you have not, check out the Basics of Google Maps.

I will start off with a simple demonstration of 3 overlapping google maps (using KML taken from SinGeo)

• View All
• MRT Stations
• Webcams
• Wifi Hotspots

I will walk through the code by chunks, where you can find the complete code at the end of this post.

<div id="adorr_multigmap" style="border: 1px solid black; width: 450px; height: 450px;">Map goes here</div>

First off, you will need a holder where the Google Maps will overlay on. As shown above, I named a div with ID “adorr_multigmap” and set the width and height to fit nicely into the layout of my blog.

<ul>
  <li><a href="javascript:void(0);" onClick="addOverlayMap(adorr_multigmap, 'all');">View All</a></li>
  <li><a href="javascript:void(0);" onClick="addOverlayMap(adorr_multigmap, 'mrt');">MRT Stations</a></li>
  <li><a href="javascript:void(0);" onClick="addOverlayMap(adorr_multigmap, 'webcam');">Webcams</a></li>
  <li><a href="javascript:void(0);" onClick="addOverlayMap(adorr_multigmap, 'wifi');">Wifi Hotspots</a></li>
</ul>

Then comes the submenu which allows users to toggle between maps, or to view all maps overlayed together. You will see the definition of addOverlayMap() function later on. Basically, it will overlay respective map accordingly.

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=***REPLACE_YOUR_GOOGLE***" type="text/javascript"></script>

In order to make use of Google Maps, you are required to sign up for a Google Maps API key (here) for your domain. Once you’ve got it, replace ***REPLACE_YOUR_GOOGLE*** with your key in order to work. This is Important!

<script type="text/javascript">
function addOverlayMap(adorr_multigmap, map_id) {
  adorr_multigmap.clearOverlays();
  var geoXml = new GGeoXml;
  if(map_id=="mrt") {
    // MRT Stations
    geoXml = new GGeoXml("http://www.singeo.com.sg/singeo/kmz/mrtsimple.kml");
    adorr_multigmap.addOverlay(geoXml);
  }
  else if(map_id=="webcam") {
    // Webcams
    geoXml = new GGeoXml("http://www.singeo.com.sg/singeo/kmz/webcams.kml");
    adorr_multigmap.addOverlay(geoXml);
  }
  else if(map_id=="wifi") {
    // Wifi Hotspots
    geoXml = new GGeoXml("http://www.singeo.com.sg/singeo/xml/wifip.xml");
    adorr_multigmap.addOverlay(geoXml);
  }
  else {
    // View All
    geoXml = new GGeoXml("http://www.singeo.com.sg/singeo/kmz/mrtsimple.kml");
    adorr_multigmap.addOverlay(geoXml);
    geoXml = new GGeoXml("http://www.singeo.com.sg/singeo/kmz/webcams.kml");
    adorr_multigmap.addOverlay(geoXml);
    geoXml = new GGeoXml("http://www.singeo.com.sg/singeo/xml/wifip.xml");
    adorr_multigmap.addOverlay(geoXml);
  }
}

This is the essential piece of code in which you will need to modify to suit your needs / usage. I would expect you to at least know the basic of JavaScript. Otherwise, check out the Basic JavaScript Programming Tutorial.

As seen above, the addOverlayMap() will take in the object and the key that corresponds to a map. Based on that, the function will first clear all the overlays, and then add the respective map overlay (using KML). For more details on KML, check out KML Tutorial.

var adorr_multigmap;
if (GBrowserIsCompatible()) {
  adorr_multigmap = new GMap2(document.getElementById("adorr_multigmap"));
  adorr_multigmap.setCenter(new GLatLng(1.3481040507348487, 103.81878448486328), 11);
  adorr_multigmap.addControl(new GLargeMapControl());
  addOverlayMap(adorr_multigmap, "all");
}
</script>

Moving next, we have to initialise the Google Maps API, by defining which HTML element should be used to show the Google Maps, and what is the center focus point based on Latitude and Longitude codes with zoom-in level.

Last but not least, addOverlayMap(adorr_multigmap, "all"); is eventually called to start the page by showing all the maps overlayed.

Download the complete source code

FYI, this is merely a very tiny part of the huge juicy Google Maps API. If you have experience in any other Google Maps API functionalities that you find it interesting, you are more than welcome to share with us!

Got anything to say? Go ahead and leave a comment!