Home/ Questions/Q 8880473
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T20:10:20+00:00

I’m using the code from this answer to make a toggle legend for a

  • 0

I’m using the code from this answer to make a toggle legend for a google map. I want each item on the legend to have it’s own icon. I have defined the url for the icon along with the layer name and kml url.

I have inserted this in to the function code:

<img src='dummy.png' id='icons'>

and added the following method:

document.getElementById("icons").src = kml[prop].icon

It does not seem to work as only the first icon is shown, and it is the wrong icon.

Where am I going wrong? Full code is below:

  <html>
<head>

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

  <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
      ul
{
list-style: none;
margin: 0;
padding: 0;
}

    </style>

<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",
        icon: "http://img89.imageshack.us/img89/4149/blueiconvib.png"
    },
    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",
        icon: "http://img201.imageshack.us/img201/6075/greenicon.png"
    }
// 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 + "\"><img src='dummy.png' id='icons'><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;
    document.getElementById("icons").src = kml[prop].icon
};

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    An ID has to be unique inside a document.

    Remove this line from the function createTogglers():

    document.getElementById("icons").src = kml[prop].icon

    and assign the src-attribute inside the loop:

    for (var prop in kml) {
        html += "<li id=\"selector-" + prop + "\"><img src='"+kml[prop].icon+"' id='icons'>xxx<input type='checkbox' id='" + prop + "'" +
        " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" +
        kml[prop].name + "<\/li>";
    }
    • 0