google-visualization google-fusion-tables

Fusion Tables Layer Query permanent tile loading issues

I've been using Google Fusion Tables periodically for a few years, though I'm still a novice.

I've recently been charged with querying one of my tables on a geo-spatial relationship. I found a great example that functions exactly as I need it to, and updated the code with my tableId, ensured that the location column was exactly the same (spelling, capitalization, etc), but when I try to update the map layer, it gives me a permanent "Data may still be loading. Drag or refresh to find out!" on the tiles. My table is public, the data downloadable... I'm not sure what I'm missing.

I'm stumped. I've included the code below and simply used // to disable the tableid from the example.

Any assistance/suggestions would be greatly appreciated! ~Nicole

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Austin TX Delivery Locations</title>

<style>
  body { font-family: Arial, sans-serif; padding: 0px; margin: 0px; }
  #map_canvas { height: 80%; width:100%; }
#query{font-family:courier;}

</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var tableid = '11QnfV_1v3N5GQs70e13SRxGR6_zYOSFJlCpMuD3C';
//var tableid = 790805;

function initialize() {

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(30.35, -97.70),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  google.maps.event.addListener(map, 'click', function(event) {
    latlng = event.latLng;
    updateQuery();
    });

   query = {
      select: 'address',
      from: tableid
    }
  layer = new google.maps.FusionTablesLayer(tableid);
  layer.setMap(map);

}


function updateQuery(){
  var limit = document.getElementById('limit').value;
  var lat = parseInt(latlng.lat() * 1000) / 1000;
  var lng = parseInt(latlng.lng() * 1000) / 1000;
  query = "SELECT address FROM " + tableid;
  query += " ORDER BY ST_Distance(address, LatLng(" + lat + ',' + lng + "))";
  query += " LIMIT " + limit;
  layer.setQuery(query);
  document.getElementById('query').innerHTML = layer.getQuery();
}

</script>
</head>
<body onLoad="initialize()">
  <div id="map_canvas"></div>
  <input type="text" id="limit" value="50" onChange="javascript:updateQuery()"/>
  <div id="query"></div>
</body>
</html>

Solution

When you see the ""Data may still be loading." message it usually means your query is invalid.

Your example has an old "numeric" table id. The syntax for the new "encrypted" table ids is different (and as currently documented)

Constructor                                         Description
FusionTablesLayer(options:FusionTablesLayerOptions) A layer that displays data from a Fusion Table.

Change:

query = {
  select: 'address',
  from: tableid
}
layer = new google.maps.FusionTablesLayer(tableid);
layer.setMap(map);

To:

query = {
    select: 'address',
    from: tableid,
};
layer = new google.maps.FusionTablesLayer({query: query });
layer.setMap(map);

And your query in updateQuery to:

query = {
    select: 'address',
    from: tableid,
    limit: limit,
    orderBy: ST_Distance(address, LATLNG(" + lat + ',' + lng + "))"
}
layer.setQuery(query);

working fiddle

code snippet:

var tableid = '11QnfV_1v3N5GQs70e13SRxGR6_zYOSFJlCpMuD3C';
//var tableid = 790805;
var latlng;

function initialize() {

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(30.35, -97.70),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  google.maps.event.addListener(map, 'click', function(event) {
    latlng = event.latLng;
    updateQuery(latlng);
  });

  query = {
    select: 'address',
    from: tableid
  };
  layer = new google.maps.FusionTablesLayer({
    query: query
  });
  layer.setMap(map);

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

function updateQuery(latlng) {
  var limit = document.getElementById('limit').value;
  query = {
    select: 'address',
    from: tableid,
    limit: limit,
    orderBy: 'ST_Distance(address, LATLNG(' + latlng.lat() + ',' + latlng.lng() + '))'
  }
  layer.setQuery(query);
  var queryObj = layer.getQuery()

  var queryStr = "from:" + queryObj.from + "<br>";
  queryStr += "select:" + queryObj.select + "<br>";
  queryStr += "limit:" + queryObj.limit + "<br>";
  queryStr += "orderBy:" + queryObj.orderBy + "<br>";

  document.getElementById('query').innerHTML = queryStr;
}

html,
body {
  font-family: Arial, sans-serif;
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
}
#map_canvas {
  height: 80%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
<input type="text" id="limit" value="50" onChange="javascript:updateQuery()" />
<div id="query"></div>