title: In Fusion Tables and Google Maps API, how do I change the Tables layer and the Map position based on dropdown menu selection?
body: <p>I am trying to make a site which uses different Fusion Tables. There is a dropdown menu which has several states. Each state has its own Fusion Table</p>
  
  <p>I would like to make it so that when you pick a state, the map loads up that state' Fusion Table.</p>
  
  <p>How do I do that?</p>
  
  <p>Below is my JavaScript code so far (filename is 'script.js'). Below that is the HTML code.</p>
  
  <p>When I change the state via dropdown, I'd like the map to load up the Fusion Table map of the state in the dropdown. Right now, it does not do that.  </p>
  
  <pre><code>$(document).ready(function(){
      var states = {
          'Alabama':'3348442',
          'Alaska':'3370522'
      };
      // SECTION 1: ADDING HTML TO DOM
      var bodyDivs = [
          '&lt;div id="map-canvas" /&gt;',
          '&lt;div id="address-form-container" /&gt;',
          '&lt;div id="state-select-container"&gt;&lt;select id="state-select" /&gt;&lt;/div&gt;'
      ];
  
      var addressContainer = [
          '&lt;span id="form pretext"&gt; Enter a city name or address &lt;/span&gt;',
          '&lt;input id="address" type="textbox" /&gt;',
          '&lt;input type="button" value="Search" /&gt;'
      ];
  
      // Append the body to &lt;html&gt;
      $('html').append('&lt;body /&gt;');
      for (var i=0; i&lt;bodyDivs.length; i++){
          $('body').append(bodyDivs[i]);
      };
  
      // Append the address form to &lt;body&gt;
      for (var i=0; i&lt;addressContainer.length; i++){
          $('div#address-form-container').append(addressContainer[i]);
      };
  
      // Append state names to the body
      for (var state in states){
          $('select').append('&lt;option value='+state+'&gt;'+state+'&lt;/option&gt;');
      };
      // DONE ADDING HTML TO DOM
  
  
      // SECTION 2: Create the Google map with the coordinates and add the Fusion Tables layer to it. Plus, it zooms and centers to whatever state is selected.
      var geocoder;
      var gmap;
      var locationColumn = "'geometry'";
      var condition = "'Median income (dollars)'&gt;0";
      var selectedState = document.getElementById("state-select").value;
      var tableId = states[selectedState];    
      var mapOptions = {
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      function initialize(){
          geocoder = new google.maps.Geocoder(); // This variables is used to automate zooming and centering in this script
          gmap = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); // Removing this removes the Google Maps layer, but would keep any layers on top of it
  
          // The Fusion Tables layer variable
          var layer = new google.maps.FusionTablesLayer({
              query: {
                  select: locationColumn,
                  from: tableId,
                  where: condition
              }
          });
  
          // This code snippet centers and zooms the map to the selected state.
          geocoder.geocode(
              {
                  'address':selectedState
              },
              function(results,status){
                  var sw = results[0].geometry.viewport.getSouthWest();
                  var ne = results[0].geometry.viewport.getNorthEast();
                  var bounds = new google.maps.LatLngBounds(sw,ne);
  
                  gmap.fitBounds(bounds)
              }
          );
  
          layer.setMap(gmap);
  
          google.maps.event.addDomListener(selectedState,'change',function(){
              updateMap(layer,tableId,locationColumn);
          });         
      }
  
  
      // SECTION 3: Find the address once the button is clicked
      $(':button').click(
          function codeAddress(){
              var address = document.getElementById("address").value;
  
              geocoder.geocode(
                  {
                      'address':address
                  },
                  function(results,status){
                      if(status===google.maps.GeocoderStatus.OK){
                          var addressSW = results[0].geometry.viewport.getSouthWest();
                          var addressNE = results[0].geometry.viewport.getNorthEast();
                          var bounds = new google.maps.LatLngBounds(addressSW,addressNE);
  
                          gmap.fitBounds(bounds);
                      } else {
                          alert("Couldn't find address for the following reason: " + status + ". Sorry about that. Please try another address.");
                      }
                  }
              );
          }
      );
  
  
      function updateMap(layer,tableId,locationColumn){
          if (selectedState) {
              tableId = states[selectedState];
  
              layer.setOptions({
                  query: {
                      select: locationColumn,
                      from: tableId,
                      where: condition
                  }
              });
  
              geocoder.geocode(
                  {
                      'address':selectedState
                  },
                  function(results,status){
                      var sw = results[0].geometry.viewport.getSouthWest();
                      var ne = results[0].geometry.viewport.getNorthEast();
                      var bounds = new google.maps.LatLngBounds(sw,ne);
  
                      gmap.fitBounds(bounds)
                  }
              );          
          }
      }
  
      google.maps.event.addDomListener(window, 'load', initialize);
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#map-canvas {
  height: 800px;
  width: 1000px;
  </code></pre>
  
  <p>}</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf8"&gt;
          &lt;title&gt;TESTING THE MAPS&lt;/title&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="public/js/script.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EDIT: Links to the HTML, CSS, and JS files---<br>
  <a href="http://speedy.sh/xRkZF/maptest.html" rel="nofollow">http://speedy.sh/xRkZF/maptest.html</a><br>
  <a href="http://speedy.sh/zSt5p/script.js" rel="nofollow">http://speedy.sh/zSt5p/script.js</a><br>
  <a href="http://speedy.sh/uCPxZ/style.css" rel="nofollow">http://speedy.sh/uCPxZ/style.css</a><br></p>