Update 12/30/12: This method is outdated and I have revised it.

Even I sometimes panic at the thought of acronyms but once you get past the technobabble, they’re just fancy names for simple concepts. “Keyhole Mashup Language” is the open source standard of mapping coordinates that Google adopted after it acquired the former Keyhole geo-mapping company. Like HTML, it involves semantic tags wrapping information. I was recently asked to fix a Google “mash-up” that involved multiple maps (KML layers) that would turn on and off a Google Map via Javascript. The fix solution was, as usual, to rebuild the whole thing using Google’s latest API standards (see samples here).

The basic application of this mash-up is to toggle multiple maps, hence the name. For my fellow urban planners, this allows the public to contrast and compare different layers like bike lanes, parks, and farmer markets without them needing to have any special ArcGIS viewer. Google also allows you to pull a KML layer directly off the Maps website, meaning you can pull live maps that anyone can update. For larger and more complex layers though you might want to have the KML layer on your server to reduce loading time.

The operating map is called the Big Box Tool Kit and features layers of points in the country where communities have opposed various big box corporations. Immediately one can toggle on maps to see how active certain parts of the country are compared to others.

Call the API.

<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=false">
</script>

Now in global.js or the header…

function initialize() {
 displayMaps();
}

Define attributes of the map (Google’s API controls and style guide is handy) and tell it where to show the Google map, in this case map_canvas.

  function displayMaps() {
	var myLatlng = new google.maps.LatLng(40,-93.8);
	var myOptions = {
	  zoom: 4,
	  center: (myLatlng),
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	}

  	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

In general the above should just generate the desired Google maps without anything on it. Now we finagle Javascript to output a layer if a form’s checkbox gets checked. There is an if statement for each layer you want. For example the first statement below: if checkbox fruit in formMapControl gets checked, layer1 will show a new Google map using apples.kml. Using form may not be terribly best practices, but the client wanted to use the browser’s native display of checkboxes.

  	if (document.formMapControl.fruit.checked) {

	        var layer1 = new google.maps.KmlLayer('apples.kml');
  		layer1.setMap(map);

  		/* Ensure the new layer does not change the map center or zoom */
  		layer1.set('preserveViewport', true);
	}

  	if (document.formMapControl.dairy.checked) {

  		var layer2 = new google.maps.KmlLayer('cheese.kml');
  		layer2.setMap(map);

  		layer2.set('preserveViewport', true);
	}

}/*this concludes function displayMaps*/
</script>

In the body the map “toggle control box” is the form and the Google map appears in a div called #map_canvas. Use CSS to style as appropriate. If you add checked to one or multiple inputs, it will default display that map layer when the page loads. In the client example link, the form is arranged in a list and position absolute next to the map_canvas, which is styled to be a box with display block. Options of course are endless, you could get fancier by giving the toggle box a transparent background and box-shadow, positioning it over the map. The bare basics follow.

<form name="formMapControl">
   
   <input type="checkbox" name="fruit" value="fruit" onclick="displayMaps();" checked />
      <label class="mapoption">Show Me Fruit!<label></li>
      <input type="checkbox" name="dairy" value="dairy" onclick="displayMaps();" />
      <label class="mapoption">Show Me Dairy!<label></li>

</form>

<div id="map_canvas"></div>