Return to Snippet

Revision: 9557
at November 11, 2008 21:18 by bcalloway

Initial Code
<div id="map"></div>

<div id="controls">
	<p class="legend"><strong>Toggle a Checkbox to Show Map Points</strong></p>
		<li><input type="checkbox" id="layer1" onClick="boxclick(this, layer1);"/><label> Layer 1 </label></li>		
		<li><input type="checkbox" id="layer2" onClick="boxclick(this, layer2);"/><label> Layer 2 </label></li>
		<li><input type="checkbox" id="layer3" onClick="boxclick(this, layer3);"/><label> Layer 3</a></label></li>

<script type="text/javascript">
	$(document).ready(function() {
		$('#controls input:checkbox').removeAttr ('checked');
	if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.300855, -82.471115), 12);
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
    // Google kml files stored on server:
		var layer0 = new GGeoXml(""); //Default onload layer
		var layer1 = new GGeoXml("");
		var layer2 = new GGeoXml("");
		var layer3 = new GGeoXml("");

    // Show the defualt onload layer
	//Toggle layers on/off using checkboxes
	function boxclick(box,category) {
        if (box.checked) {
        } else {

Initial URL

Initial Description
Sample script to use Google API to display a map with multiple marker layers that can be toggled on/off using checkboxes.  The map data is provided using the .kml files provided from "My Maps" on Google, or Google Earth files.

Initial Title
Google Maps API using .kml files from "My Maps"

Initial Tags
javascript, xhtml, google

Initial Language