title: Google Fusion Table Multiple Layer with Checkbox
body: <p>I'm using a Google Fusion table to create a map that allows a user to select multiple color options for a single polygon.  In the attached jsfiddle I've got a working example: </p>
  
  <p>Area 1 has a default gray color and a red Closed color upon selecting the checkbox.  What I'd like is to have the Open checkbox cause Area 1 to become Green. Thus, Area 1 could have 3 possible colors (Gray, Red, or Green).</p>
  
  <p>I've tried duplicating all of the layer information into a layer2 but have had no luck getting this to work. </p>
  
  <p>Thanks for any suggestions.</p>
  
  <p><a href="http://jsfiddle.net/EezcR/9/" rel="nofollow">http://jsfiddle.net/EezcR/9/</a></p>
  
  <pre><code>function initialize() {
      var tableId = '1_k6LlHVA4eJSgsZJ0esbImaA1HG_bgT_SDEOor0';
  
      var map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(38.33,-98.76),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
  
      var layer = new google.maps.FusionTablesLayer();
      filterMap(layer, tableId, map);
  // Initialize the first layer
      var firstLayer = new google.maps.FusionTablesLayer({
        query: {
          select: 'geometry',
          from: '1_k6LlHVA4eJSgsZJ0esbImaA1HG_bgT_SDEOor0'
        },
          styleId: 2,
          templateId: 2,
        map: map, 
      });
  
  
      google.maps.event.addDomListener(document.getElementById('A'),
          'click', function() {
            filterMap(layer, tableId, map);
      });
  
      google.maps.event.addDomListener(document.getElementById('B'),
          'click', function() {
            filterMap(layer, tableId, map);
      });
    }
  
  
    // Filter the map based on checkbox selection.
    function filterMap(layer, tableId, map) {
      var where = generateWhere();
  
      if (where) {
        if (!layer.getMap()) {
          layer.setMap(map);
        }
        layer.setOptions({
          query: {
            select: 'geometry',
            from: tableId,
            where: where
          }
        });
      } else {
        layer.setMap(null);
      }
    }
  
    // Generate a where clause from the checkboxes. If no boxes
    // are checked, return an empty string.
    function generateWhere() {
      var filter = [];
      var stores = document.getElementsByName('store');
      for (var i = 0, store; store = stores[i]; i++) {
        if (store.checked) {
          var storeName = store.value.replace(/'/g, '\\\'');
          filter.push("'" + storeName + "'");
        }
      }
      var where = '';
      if (filter.length) {
        where = "'name' IN (" + filter.join(',') + ')';
      }
      return where;
    }
  
    google.maps.event.addDomListener(window, 'load', initialize);
  
  
  
  
  
      &lt;div id="map-canvas"&gt;&lt;/div&gt;
  
  &lt;div&gt;Area 1:
    &lt;input type="checkbox"  name="store"
        id="A" value="A"&gt;
    &lt;label&gt;Closed&lt;/label&gt;
    &lt;input type="checkbox" name="store"
        id="C" value="C"&gt;
    &lt;label&gt;Open&lt;/label&gt;
  
  &lt;/div&gt;
    &lt;div&gt;Area 2:
    &lt;input type="checkbox"  name="store"
        id="B" value="B"&gt;
    &lt;label&gt;Closed&lt;/label&gt;
    &lt;input type="checkbox" name="store"
        id="D" value="D"&gt;
    &lt;label&gt;Open&lt;/label&gt;
  
  &lt;/div&gt; 
  </code></pre>