Question

I am working with Google Maps and I am trying to create a sidebar that enables different KML overlays. I have put the KML layers into variables with the same as the ID tag of the button to press to activate them, in hopes to call that ID as the variable, which can then be used in the setMap function.
Not sure if this is actually possible

In this script here I am trying to make it so you press element with ID tag ‘kml1′, set testvar=’kml1’, and then be able to put testvar.setMap(the_Map) in place of kml1.setMap(the_Map), as testvar==kml1

jQuery

kml1 = new google.maps.KmlLayer("http://www.domain.com/map_overlay1.txt", {
            preserveViewport: true,
        });
        kml2 = new google.maps.KmlLayer("http://www.odomain.com/map_overlay2.txt", {
            preserveViewport: true,
        });

    $(document).ready(function() {
        $('.kml_item').toggle(
                function() {
                    for (i=0; i<50; i++) {
                        testvar = this.id
                        if (testvar == 'kml' + i) {
                            testvar.setMap(the_Map);
                            break;
                        }
                    }
                },
                function() {
                    for (i=0; i<50; i++) {
                        testvar = this.id
                        if (testvar == 'kml' + i) {
                            testvar.setMap(null);
                            break;
                        }
                    }
            );
    })

associated HTML

<div id="kml1" class="kml_item">KML 1</div>
            <div id="kml2" class="kml_item">KML 2</div>

Answer 1

Not sure if it’s really kosher to answer your own question on this site, but I figured out another method, although I do believe my initial problem of using an ID tag as a variable is unsolvable the way I was approaching it. Instead of each KML layer in a separate variable, I put them together in an array. Giving the clickable divs a number for a title tag allows the function to then count up until the array item matches the title number for the div and places that item from the array onto the map.

KML array

kml_arr = [
            new google.maps.KmlLayer("http://www.domain.com/map_overlay1.txt", {
            preserveViewport: true,
        }),
            new google.maps.KmlLayer("http://www.domain.com/map_overlay2.txt", {
            preserveViewport: true,
        })
        ]

jQuery

$(document).ready(function() {
        $('.kml_item').toggle(
                function() {
                    $(this).animate({backgroundColor: '#ffffff'}, 200);
                    for (i=0; i<50; i++) {
                        if (i == this.title) {
                            kml_arr[i].setMap(the_Map);
                            break;
                        }
                    }
                },
                function() {
                    $(this).animate({backgroundColor: '#d0d0d0'}, 200);
                    for (i=0; i<50; i++) {
                        if (i == this.title) {
                            kml_arr[i].setMap(null);
                            break;
                        }
                    }
                }
            );
    })

associated HTML

                <div title="0" id="kml1" class="kml_item">KML 1</div>
            <div title="1" id="kml2" class="kml_item">KML 2</div>