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

<div id="controls">
	<p class="legend"><strong>Toggle a Checkbox to Show Map Points</strong></p>
	<ul>
		<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>
	</ul>
</div>

<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());
		map.setMapType(G_PHYSICAL_MAP);
		map.addMapType(G_PHYSICAL_MAP);
    
    // Google kml files stored on server: http://mydomain.com/google/filename.kml
		var layer0 = new GGeoXml("http://mydomain.com/google/layer0.kml"); //Default onload layer
		var layer1 = new GGeoXml("http://mydomain.com/google/layer1.kml");
		var layer2 = new GGeoXml("http://mydomain.com/google/layer2.kml");
		var layer3 = new GGeoXml("http://mydomain.com/google/layer3.kml");

    // Show the defualt onload layer
		map.addOverlay(layer0);
	}
	
	//Toggle layers on/off using checkboxes
	function boxclick(box,category) {
        if (box.checked) {
          map.addOverlay(category);
        } else {
          map.removeOverlay(category);
        }
	}
	
</script>

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.

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

javascript, xhtml, google

JavaScript