title: How to toggle a layer on/off using Google Maps API v3 and Fusion Tables?
body: <p>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. </p>
  
  <p>Here is a link to a copy of the map: <a href="https://mywebspace.wisc.edu/csterling/web/cartel%20map/index%20-%20practice.html" rel="nofollow">https://mywebspace.wisc.edu/csterling/web/cartel%20map/index%20-%20practice.html</a></p>
  
  <p>Here is the code (sorry about the formatting)</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDRngi4TwTlx3r9zRXxIGzbSAq6OcEpxjA&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;link rel='stylesheet' href='stylesheet.css' /&gt;
  &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  
  
  &lt;script type='text/javascript'&gt;
  
  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
  
      }); */
  
  
  
      }
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id='mymap'&gt;&lt;/div&gt;    
  </code></pre>
  
  <p>
  </p>
  
  #
  
  <p>EDIT</p>
  
  #
  
  <p>Ok, I got it! Here's my code in case others are having the same question:</p>
  
  <p></p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
  &lt;!-- &lt;script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'&gt;&lt;/script&gt; --&gt;
  
  &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDRngi4TwTlx3r9zRXxIGzbSAq6OcEpxjA&amp;sensor=false"&gt;&lt;/script&gt;
  
  &lt;link rel='stylesheet' href='stylesheet.css' /&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>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;
  
  
  
  
  
      }
  
  
  
  
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;    
  
    &lt;div id='mymap'&gt;&lt;/div&gt;    
  
    &lt;div id='map-optionbar-r'&gt;        
  
      Sum of Homicides&lt;input name="layers" type="radio" value="layer_sum" onClick="toggleLayer(layer_sum);" checked&gt;&lt;br /&gt;
  
      Homicides - 2007&lt;input name="layers" type="radio" value="layer_2007" onClick="toggleLayer(layer_2007);"&gt;&lt;br /&gt;
  
      Homicides - 2008&lt;input name="layers" type="radio" value="layer_2008" onClick="toggleLayer(layer_2008);"&gt;&lt;br /&gt;
  
      Homicides - 2009&lt;input name="layers" type="radio" value="layer_2009" onClick="toggleLayer(layer_2009);"&gt;&lt;br /&gt;
  
      Homicides - 2010&lt;input name="layers" type="radio" value="layer_2010" onClick="toggleLayer(layer_2010);"&gt;&lt;br /&gt;
  
    &lt;/div&gt; 
  </code></pre>
  
  <p></p>
  
  <p></p>