2

I'm stuck. I can't get my checkbox functional. I would like to toggle two layers with a checkbox. The two layers should be on when loaded (check box checked) and then turned off when unchecked. Simple, I know, but I can't get it functional despite looking at lots of working examples and checking all the posts. Most of the stuff I found were how it worked with KML and fusion tables. I have something working kinda that works for a button but this doesn't work well for check boxes.

Here is the code for the drop down box with the check boxes.

tileNEX = new google.maps.ImageMapType({
            getTileUrl: function(tile, zoom) {
                return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
            },
            tileSize: new google.maps.Size(256, 256),
            opacity:0.50,
            name : 'NEXRAD',
            isPng: true
        });


       goes = new google.maps.ImageMapType({
            getTileUrl: function(tile, zoom) {
                return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-ir-4km-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
            },
            tileSize: new google.maps.Size(256, 256),
            opacity:0.50,
            name : 'GOES NA Vis',
            isPng: true
        });

        //create the check box items
        var radarOptions = {
                gmap: map,
                title: "This allows for selection/toggling on/off Radar layer",
                id: "radarCheck",
                label: "Radar",
                action: function(){
                if (map.overlayMapTypes.length==0) {
                  map.overlayMapTypes.push(null); // create empty overlay entry
                  map.overlayMapTypes.setAt("1",tileNEX);
                }
                else {
                    map.overlayMapTypes.clear();
                }

            }
}

        var check1 = new checkBox(radarOptions);

        var radarAnimate = {
                gmap: map,
                title: "This allows for selection/toggling on/off Animated Radar",
                id: "radarAnimate",
                label: "Animate Radar",
                action: function(){
                    alert('Function is coming soon');
                }
        }
        var check2 = new checkBox(radarAnimate);

        var satOptions = {
                gmap: map,
                title: "This allows for selection/toggling on/off Satelite layer",
                id: "satCheck",
                label: "Satellite",
                action: function(){
                if (map.overlayMapTypes.length==0) {
                  map.overlayMapTypes.push(null); // create empty overlay entry
                  map.overlayMapTypes.setAt("1",goes);
                }
                else {
                    map.overlayMapTypes.clear();
                }

            }
}
        var check3 = new checkBox(satOptions);

        //create the input box items

        //possibly add a separator between controls
        var sep = new separator();

        //put them all together to create the drop down
        var ddDivOptions = {
            items: [sep, check1, check2, check3],
            id: "myddOptsDiv"
        }
        //alert(ddDivOptions.items[1]);
        var dropDownDiv = new dropDownOptionsDiv(ddDivOptions);

        var dropDownOptions = {
                gmap: map,
                name: 'Options',
                id: 'ddControl',
                title: 'A custom drop down select with mixed elements',
                position: google.maps.ControlPosition.TOP_RIGHT,
                dropDown: dropDownDiv
        }

        var dropDown1 = new dropDownControl(dropDownOptions);

FULL CODE

LINK TO MAP

3
  • Still looking for suggestions if anyone has one. I still haven't been able to find a working solution for my situation.
    – Texan78
    May 17, 2013 at 23:12
  • Hi, The problem is it still relevant ? When loading the page which have the map, i've got some javascript errors... Uncaught TypeError: Cannot set property 'getPrefs' of undefined wundermap.min.js:8969 Uncaught TypeError: Object [object Object] has no method 'removeOverlays'
    – Seb P
    Jun 11, 2013 at 17:01
  • @SebP sorry I thought I had deleted this as I have taken a different approach and found another source to generate a different layer. The current question is found here. stackoverflow.com/questions/17005537/goolge-maps-toggle-button
    – Texan78
    Jun 12, 2013 at 19:47

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.