Skip to content

Instantly share code, notes, and snippets.

@bcalloway
Created February 23, 2009 15:30
Show Gist options
  • Save bcalloway/68995 to your computer and use it in GitHub Desktop.
Save bcalloway/68995 to your computer and use it in GitHub Desktop.
Google Map API - toggle layer
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment