How to toggle a layer on/off using Google Maps API v3 and Fusion Tables?

javascript google-maps google-maps-api-3 google-fusion-tables
csterling picture csterling · May 25, 2012 · Viewed 13.2k times · Source

I am trying to make a map with multiple fusion table layers. Each fusion table layer will show the number of cartel-related homicides in a particular year (including the sum of all years). Since each layer has the same geometry, I need to let the user view one layer at a time. Is there a way to toggle each layer on/off using a radio button? I've searched for tutorials or examples for a few hours and have come up empty, so I'm hoping someone here can help.

Here is a link to a copy of the map: https://mywebspace.wisc.edu/csterling/web/cartel%20map/index%20-%20practice.html

Here is the code (sorry about the formatting)

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

#

EDIT

#

Ok, I got it! Here's my code in case others are having the same question:

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

Answer

Eric Bridger picture Eric Bridger · May 25, 2012 
toggleLayer(layer1);
// make sure your map is a global
function toggleLayer(this_layer)
{
   if( this_layer.getMap() ){
        this_layer.setMap(null);
   }else{
        this_layer.setMap(map);
   }
}
</head>
<body>
<br />
Layer 1<input name="layers" type="radio" value="layer1" onClick="toggleLayer(layer1);"><br />
Layer 2<input name="layers" type="radio" value="layer2" onClick="toggleLayer(layer2);"><br />

UPDATED

   <script type='text/javascript'>
    var map, layer1, layer2;
  google.load("maps", "3", {other_params:"sensor=false"});
 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: false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL

        }
    };                  

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

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


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

    }); 


    layer2 = new google.maps.FusionTablesLayer({

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

    }); 

    // may need to remove this line
    //layer1.setMap(map);

    }

    function old_toggleLayer(this_layer){
        if ( this_layer.getMap() ) {
            this_layer.setMap(null);
        }else{
            this_layer.setMap(map);
        }

    }

    function toggleLayer(this_layer){
        layer1.setMap(null);
        layer2.setMap(null);
        this_layer.setMap(map);

    }



</script>

Related questions

Google Maps JS API v3 - Simple Multiple Marker Example

Fairly new to the Google Maps Api. I've got an array of data that I want to cycle through and plot on a map. Seems fairly simple, but all the multi-marker tutorials I have found are quite complex. Let's use …

Read More
Google Maps API v3: How to remove all markers?

In Google Maps API v2, if I wanted to remove all the map markers, I could simply do: map.clearOverlays(); How do I do this in Google Maps API v3? Looking at the Reference API, it's unclear to me.

Read More
Google Map API v3 — set bounds and center

I've recently switched to Google Maps API V3. I'm working of a simple example which plots markers from an array, however I do not know how to center and zoom automatically with respect to the markers. I've searched the net …

Read More