Home/ Questions/Q 8320481
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T22:39:59+00:00

Is there a simple way to set up checkboxes to toggle (on/off) KML layers

  • 0

Is there a simple way to set up checkboxes to toggle (on/off) KML layers for Google Maps v3? I’ve come across these articles, but none of them have worked for me.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sorry my article didn’t work for you, it is a little dated.

    Here is a full example of a typical Gmaps toggle assuming you are using kml files. 

    <html>
<head>

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

var map;

// lets define some vars to make things easier later
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 if ye like 
};

// 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();
};

google.maps.event.addDomListener(window, 'load', initializeMap);

// the important function... kml[id].xxxxx refers back to the top 
function toggleKML(checked, id) {

    if (checked) {

        var layer = new google.maps.KmlLayer(kml[id].url, {
            preserveViewport: true,
            suppressInfoWindows: true 
        });
        // store kml as obj
        kml[id].obj = layer;
        kml[id].obj.setMap(map);
    }
    else {
        kml[id].obj.setMap(null);
        delete kml[id].obj;
    }

};

// create the controls dynamically because it's easier, really
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
function removeAll() {
    for (var prop in kml) {
        if (kml[prop].obj) {
            kml[prop].obj.setMap(null);
            delete kml[prop].obj;
        }

    }
};


// Append Class on Select
function highlight(box, listitem) {
    var selected = 'selected';
    var normal = 'normal';
    document.getElementById(listitem).className = (box.checked ? selected: normal);
};

function startup() { 
// for example, this toggles kml b on load and updates the menu selector
var checkit = document.getElementById('b');
checkit.checked = true;
toggleKML(checkit, 'b');
highlight(checkit, 'selector1');
 }

</script>

<style type="text/css">
.selected { font-weight: bold; }
</style>

</head>
<body onload="startup()">
<div id="map_canvas" style="width: 100%; height: 600px;"></div>
<div id="toggle_box" style="position: absolute; top: 100px; right: 20px; padding: 10px; background: #fff; z-index: 5; "></div>
</body>
</html>

    This is pure js so of course using jQuery you can do things a little easier. Hope this helps!

    • 0