Search code examples
google-fusion-tables

Fusion Table layer dropdown query pan and zoom not working

I am trying to get this google map to pan and zoom to the selected dropdown option. The dropdown query itself is working but I am new to coding and I can't figure out what is wrong with the code to get the map to pan and zoom to the query results. The column heading is "Query" on the google fusion table, so I am getting confused.

Here is an example of what I want the map to do: http://www.geocodezip.com/geoxml3_test/www_advocacy_ucla_edu_Assembly_MapC.html

and this is where I got sections of the pan/zoom code from: http://www.geocodezip.com/geoxml3_test/v3_SO_FusionTables_pan2Marker.html

And, here is my code:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <!-- <link href="style.css" rel="stylesheet" /> -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
   var tableId = '15wosKAeHC0gcpU_N6UPbxPL09RrEBKlQNEaCmnU';
   var locationColumn = 'Lat';
    map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
      center: new google.maps.LatLng(34.03,-111.9),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

    layer = new google.maps.FusionTablesLayer({
      map: map,
      heatmap: { enabled: false },
      query: {
            select: locationColumn,
            from: tableId
      },
      options: {
        styleId: 3,
        templateId: 3
      }
    });
            layer . setMap ( map ); 

            google.maps.event.addDomListener(document.getElementById('Query'),
            'change', function() {
              updateMap(layer, tableId, locationColumn);
        });
  }
   // Update the query sent to the Fusion Table Layer based on
      // the user selection in the select menu
      function updateMap(layer, tableId, locationColumn) {
        var query = document.getElementById('Query').value;
        if (query) {
          layer.setOptions({
            query: {
              select: locationColumn,
              from: tableId,
              where: "Query = '" + query + "'"
            }
          });
          panToMarker(Query, tableId, locationColumn);
        } else {
          layer.setOptions({
            query: {
              select: locationColumn,
              from: tableId
            }
          });
        }

      }

        function panToMarker(Query, tableId, locationColumn) {
    var queryStr = "SELECT "+locationColumn+" FROM "+tableId+" WHERE Query = "+Query+";";
    document.getElementById('query').innerHTML = queryStr;
    var queryText = encodeURIComponent(queryStr);
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

    query.send(panTo);
    }

    function panTo(response) {
    if (!response) {
      alert('no response');
      return;
    }
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    } 

      FTresponse = response;
      //for more information on the response object, see the documentation
      //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
      numRows = response.getDataTable().getNumberOfRows();
      numCols = response.getDataTable().getNumberOfColumns();
      var geoXml = new geoXML3.parser();
      var kml = FTresponse.getDataTable().getValue(0,0);
      geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>");
      geoXml.docs[0].markers[0].setMap(null);
      map.setCenter(geoXml.docs[0].markers[0].getPosition());
      if (map.getZoom() < 10) map.setZoom(10);
    }


  google.maps.event.addDomListener(window, 'load', initialize);




</script>
</head>
  <body>
  <div id="wrapper">



<table>
<tr>
<td>
<div id="menu" style="background-color:#EFE0B9;height:500px;width:150px;float:left;">


<label><b>Select:</b></label>
    <select id="Query">
<option value="Bishop Creek">Bishop Creek</option>
<option value="Blue Spring">Blue Spring</option>
<option value="Blue Wash">Blue Wash</option>
<option value="Bronco Creek">Bronco Creek</option>
<option value="Camp Creek">Camp Creek</option>
<option value="Cave Creek">Cave Creek</option>
<option value="Columbine Spring">Columbine Spring</option>
<option value="Copper Creek">Copper Creek</option>
<option value="Cottonwood Creek">Cottonwood Creek</option>
<option value="Davenport Wash">Davenport Wash</option>
<option value="Deadman Creek">Deadman Creek</option>
<option value="Grapevine Canyon">Grapevine Canyon</option>
<option value="Holmes Canyon">Holmes Canyon</option>
<option value="Horse Creek">Horse Creek</option>
<option value="Jacks Gulch">Jacks Gulch</option>
<option value="Lime Creek upper">Lime Creek upper</option>
<option value="Lime Creek lower">Lime Creek lower</option>
<option value="Mud Spring">Mud Spring</option>
<option value="New River">New River</option>
<option value="Rackensack Canyon">Rackensack Canyon</option>
<option value="Red Creek">Red Creek</option>
<option value="Red Creek Middle">Red Creek Middle</option>
<option value="Round Tree Canyon">Round Tree Canyon</option>
<option value="Seven Springs">Seven Springs</option>
<option value="Silver Creek">Silver Creek</option>
<option value="Sheep Creek">Sheep Creek</option>
<option value="Squaw Creek">Squaw Creek</option>
<option value="Sycamore Creek">Sycamore Creek</option>
<option value="Sycamore Creek HK Ranch">Sycamore Creek HK Ranch</option>
<option value="Tangle Creek">Tangle Creek</option>
<option value="Two Mile Spring">Two Mile Spring</option>
<option value="Verde River">Verde River</option>
<option value="Walnut Spring">Walnut Spring</option>
<option value="Wet Bottom Creek">Wet Bottom Creek</option>
    </select>
    <br><br><br><br><br><br><br>

</td>
<td>
  <div id="googft-mapCanvas" style="width:700px; height:600px;">
</td>


 </div>
</body>
</html>

I have no idea what I am doing wrong, I would really appreciate if anyone could point me in the right direction!! =D

Solution

    1. The code is attempting to use a GViz query, but that API is not included. Add:

      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});

    2. The code is attempting to parse KML from the Lat column, but that isn't KML, it is a 2 column location. Remove:

      var geoXml = new geoXML3.parser();
var kml = FTresponse.getDataTable().getValue(0,0);
geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>");
geoXml.docs[0].markers[0].setMap(null);
map.setCenter(geoXml.docs[0].markers[0].getPosition());
if (map.getZoom() < 10) map.setZoom(10);

    Replace that with:

        var bounds = new google.maps.LatLngBounds();
    for (var i=0; i<numRows; i++) {
      var lat = FTresponse.getDataTable().getValue(i,0);
      var lng = FTresponse.getDataTable().getValue(i,1);
      var point = new google.maps.LatLng(lat,lng);
      bounds.extend(point);
    }
    if (numRows == 1) map.setCenter(point);
    else map.fitBounds(bounds);
    if (map.getZoom() < 10) map.setZoom(10);

    Change your GViz query to:

        var queryStr = "SELECT Lat,Long FROM "+tableId+" WHERE Query = '"+Query+"';";

    working example