Advanced Search

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>
	<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>
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
                                        

                                    

                                    
JavaScript