My new KML toggle method is as follows which more logically lays out the variables and functions involved. The true improvement is that in order to add new KML files to the map, you simply add a new row to array kml. The code generates the rest. This code is literal easily adaptable to more asynchronous applications.
Code below or view it on Github.
<html>
<head>
<title>KML Toggle Example</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// define some variables to be used later
var map;
var overlays = [];
var kml = {
a: {
name: "MPLS/STPL",
url: "https://maps.google.com/maps/ms?authuser=0&vps=5&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004b06640255267e038c"
},
b: {
name: "Bicycling Tour Routes",
url: "https://maps.google.com/maps/ms?authuser=0&vps=4&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004902a1824bbc8c0fe9"
},
// keep adding more, the url can be any kml file
};
// initialize our goo
function initializeMap() {
var options = {
center: new google.maps.LatLng(44.9812, -93.2687),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), options);
createTogglers(); // in this example I dynamically create togglers, you can otherwise use jQuery
};
google.maps.event.addDomListener(window, 'load', initializeMap);
// this does all the toggling work, id references the a b names I gave the kml array items
function toggleKML(checked, id) {
if (checked) {
var layer = new google.maps.KmlLayer(kml[id].url, {
preserveViewport: true,
suppressInfoWindows: true
});
kml[id].obj = layer; // turns the layer into an object for reference later
kml[id].obj.setMap(map); // alternative to simply layer.setMap(map)
}
else {
kml[id].obj.setMap(null);
delete kml[id].obj;
}
};
// in this example create the controls dynamically, prop is the id name
function createTogglers() {
var html = "<form><ul>";
for (var prop in kml) {
html += "<li id="selector-" + prop + ""><input type='checkbox' id='" + prop + "'" +
" onclick='highlight(this, "selector-" + prop + ""); toggleKML(this.checked, this.id)' />" +
kml[prop].name + "</li>";
}
html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
"Remove all layers</a></li>" +
"</ul></form>";
document.getElementById("toggle_box").innerHTML = html;
};
// easy way to remove all objects, cycle through the kml array and delete items that exist
function removeAll() {
for (var prop in kml) {
if (kml[prop].obj) {
document.getElementById("selector-" + prop).className = 'normal'; // in normal js, this replaces any existing classname
document.getElementById(prop).checked = false;
kml[prop].obj.setMap(null);
delete kml[prop].obj;
}
}
};
// append class on select, again old school way
function highlight(box, listitem) {
var selected = 'selected';
var unselected = 'normal';
document.getElementById(listitem).className = (box.checked ? selected : unselected);
};
</script>
<style type="text/css">
#toggle_box { position: absolute; top: 100px; right: 30px; padding: 10px; background: #fff; z-index: 5; box-shadow: 0 5px 10px #777 }
ul { margin: 0; padding: 0; font: 100 1em/1em Helvetica; }
ul li { display: block; padding: 10px; margin: 2px 0 0 0; transition: all 100ms ease-in-out 600ms; }
ul li a:link { border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 5px 20px #ddd; padding: 10px; font-size: 0.8em; display: block; text-align: center; }
.selected { font-weight: bold; background: #ddd; }
</style>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 600px;"></div>
<div id="toggle_box"></div>
</body>
</html>