Jak włączyć / wyłączyć warstwę za pomocą Google Maps API v3 i Fusion Tables?

Próbuję utworzyć mapę z wieloma warstwami tabeli fuzji. Każda warstwa tabeli syntezy jądrowej pokaże liczbę zabójstw związanych z kartelami w danym roku (w tym sumę wszystkich lat). Ponieważ każda warstwa ma tę samą geometrię, muszę pozwolić użytkownikowi wyświetlić jedną warstwę na raz. Czy istnieje sposób włączania / wyłączania każdej warstwy za pomocą przycisku radiowego? Szukałem samouczków lub przykładów przez kilka godzin i wyszedłem pusty, więc mam nadzieję, że ktoś tutaj może pomóc.

Oto link do kopii mapy:https://mywebspace.wisc.edu/csterling/web/cartel%20map/index%20-%20practice.html

Oto kod (przepraszam za formatowanie)

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDRngi4TwTlx3r9zRXxIGzbSAq6OcEpxjA&sensor=false"></script>
<link rel='stylesheet' href='stylesheet.css' />
<script type="text/javascript" src="script.js"></script>


<script type='text/javascript'>

window.onload = function () {

    var oceanStyle = [
        {
         featureType: "ocean",
         stylers: [
            { saturation: -100 }
            ]
        },
        {
         featureType: "all",
         elementType: "labels",
         stylers: [
         { visibility: "off"}
         ]
         }

    ];

    var oceanMapType = new google.maps.StyledMapType(oceanStyle, 
        {name: "Grayscale"});


    var myLatlng = new google.maps.LatLng(0,0);

    var mapOptions = {
        center: new google.maps.LatLng(24,-103),
        zoom: 5,
        //mapTypeId: google.maps.MapTypeId.HYBRID,
        mapTypeControl: true,
        mapTypeControlOptions: {                
            position: google.maps.ControlPosition.RIGHT_TOP,
            mapTypeIds: [google.maps.MapTypeId.HYBRID, 'Grayscale']
            },

        panControl: false,
        streetViewControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL

        }
        };                  

    var map = new google.maps.Map(document.getElementById("mymap"), mapOptions);

    map.mapTypes.set('Grayscale',oceanMapType);
    map.setMapTypeId('Grayscale');

    var layer1 = new google.maps.FusionTablesLayer({
        query:{
            select: 'unique_id',
            from: '3943497'
        },
        map: map

    });

        /*
    var layer2 = new google.maps.FusionTablesLayer({

        query:{
            select: 'unique_id',
            from: '3962564'         
        },
        map: map

    }); */



    }


</script>
</head>
<body>
  <div id='mymap'></div>    

#

EDYTOWAĆ

#

Ok, rozumiem! Oto mój kod na wypadek, gdyby inni mieli to samo pytanie:

<html>

<head>

<!-- <script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script> -->

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

<link rel='stylesheet' href='stylesheet.css' />

var map;

//var layArray = [];

var shownLayer;

var layer_sum;

var layer_2007;

var layer_2008;

var layer_2009;

var layer_2010;



function toggleLayer(this_layer){

    shownLayer.setMap(null);

    this_layer.setMap(map);

    shownLayer = this_layer;

    /*if ( this_layer.getMap() ) {

        this_layer.setMap(null);

    }else{

        this_layer.setMap(map);

    }*/ 

}



 window.onload = function () {



    var oceanStyle = [

        {

         featureType: "ocean",

         stylers: [

            { saturation: -100 }

            ]

        },

        {

         featureType: "all",

         elementType: "labels",

         stylers: [

         { visibility: "off"}

         ]

         }



    ];



    var oceanMapType = new google.maps.StyledMapType(oceanStyle, 

        {name: "Grayscale"});





    var myLatlng = new google.maps.LatLng(0,0);



    var mapOptions = {

        center: new google.maps.LatLng(24,-103),

        zoom: 6,

        //mapTypeId: google.maps.MapTypeId.HYBRID,

        mapTypeControl: true,

        mapTypeControlOptions: {                

            position: google.maps.ControlPosition.RIGHT_TOP,

            mapTypeIds: [google.maps.MapTypeId.HYBRID, 'Grayscale']

            },



        panControl: true,

        streetViewControl: false,

        zoomControl: true,

        zoomControlOptions: {

            style: google.maps.ZoomControlStyle.SMALL



        }

        };                  



    map = new google.maps.Map(document.getElementById("mymap"), mapOptions);



    map.mapTypes.set('Grayscale',oceanMapType);

    map.setMapTypeId('Grayscale');





    layer_sum = new google.maps.FusionTablesLayer({

        query:{

            select: 'unique_id',

            from: '3943497'

        },      



    }); 





    layer_2007 = new google.maps.FusionTablesLayer({



        query:{

            select: 'unique_id',

            from: '3962564'         

        },          



    }); 



    layer_2008 = new google.maps.FusionTablesLayer({



        query:{

            select: '2008',

            from: '3962469'

        },



    });



    layer_2009 = new google.maps.FusionTablesLayer({



        query: {

            select: '2009',

            from: '3964318'             

        },

    });



    layer_2010 = new google.maps.FusionTablesLayer({



        query: {

            select: '2010',

            from: '3964517'

        },

    });



    layer_sum.setMap(map);

    shownLayer = layer_sum;





    }





</script>

</head>

<body>    

  <div id='mymap'></div>    

  <div id='map-optionbar-r'>        

    Sum of Homicides<input name="layers" type="radio" value="layer_sum" onClick="toggleLayer(layer_sum);" checked><br />

    Homicides - 2007<input name="layers" type="radio" value="layer_2007" onClick="toggleLayer(layer_2007);"><br />

    Homicides - 2008<input name="layers" type="radio" value="layer_2008" onClick="toggleLayer(layer_2008);"><br />

    Homicides - 2009<input name="layers" type="radio" value="layer_2009" onClick="toggleLayer(layer_2009);"><br />

    Homicides - 2010<input name="layers" type="radio" value="layer_2010" onClick="toggleLayer(layer_2010);"><br />

  </div> 

questionAnswers(2)

yourAnswerToTheQuestion