Interactive legend in Google Maps API V3 with two or more KML layers

Question

I'm fairly new to JavaScript and Google Maps API(basically, the whole world of web GIS) and I'm struggling with creating interactive legend for several KML layers (in this example, only two) or something like this http://www.strahlen.org/map/central.htm but for KML layers.

Here is my code:

<script>
  var tocka = new google.maps.LatLng(46.150346, 15.863571);

  function initialize() {
    var neven = {
      center: tocka,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), neven);


    var ctaLayer = new google.maps.KmlLayer({
      url: 'https://dl.dropboxusercontent.com/u/126827789/kuce.kmz'

    });
    ctaLayer.setMap(map);

    var ctaLayer = new google.maps.KmlLayer({
      url: 'https://dl.dropboxusercontent.com/u/126827789/neven.kmz'
    });
    ctaLayer.setMap(map);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

So.. I want to add some checkboxes to toggle between this two kml files if it is possible?

Any help and advice is more then welcome. Thank you in advance, Neven.

Answer 1

So you are not really asking for a legend concerning the content of the maps, just a toggle option. I got this answer from another question (Toggle KML Layers in Google Maps v3) but I cleaned it up because it did not initially work for me. It works well now. Here is one I have:

// Define the kml layers 
var kml = {
    a: {
        name: "Elevation Contours",
        url:'https://website.com/id/LimaContours200.kml'},
    b: {
        name: "Districts",
        url: 'https://https://website.com/id/LimaDistricts.kml'},
c:{
       name: "CAPECO Zones",
   url: 'https://website.com/id/ZonasCapeco.kml'}}

function initialize(){
    var mapOptions ={
    zoom: 12,
    center: new google.maps.LatLng(-12.0456072,-76.9991801),
    mapTypeId: google.maps.MapTypeId.SATELLITE,};
    //Display the map
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    createTogglers();
    removeAll();
    startup();};

// 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, 'selector-b');}