Fusion Table Query via Google Visualization - google-visualization

Question

function createBoundingBox() {
outputDiv = document.getElementById('outputDiv');
outputDiv.innerHTML = '';
var queryList = [];
queryList.push("SELECT 'WEB', 'NAME', 'ADDRESS', 'Lat', 'Lng', 'WEB1' FROM ");
queryList.push(Table);
queryList.push(" WHERE " + where + " AND ");
queryList.push("ST_INTERSECTS('GEOMETRY', ");
queryList.push("RECTANGLE(LATLNG");
queryList.push(sw);
queryList.push(", LATLNG");
queryList.push(ne);
queryList.push("))");
var query = encodeURIComponent(queryList.join(''));
var gvizQuery = new google.visualization.Query(
'http://www.google.com/fusiontables/gvizdata?tq=' + query);
gvizQuery.send(function(response) {
numRow = response.getDataTable().getNumberOfRows();
var datatable = response.getDataTable();
if (datatable && datatable.getNumberOfRows()) {
// var linkList = [];
var newLinkList = [];
for (var i = 0; i < numRow; i++) {
var name = response.getDataTable().getValue(i, 1);
nameList.push(name);
var address = response.getDataTable().getValue(i, 2);
addressList.push(address);
var latitude = new google.maps.LatLng(response.getDataTable().getValue(i, 3)); alert(latitude)
latitudeList.push(latitude);
var longitude = new google.maps.LatLng(response.getDataTable().getValue(i, 4));
longitudeList.push(longitude);
var newLink = response.getDataTable().getValue(i, 5);
newLinkList.push("<a name = 'link' id="+"'" + i + "'" + "onmouseover='getId(this)' href=" + newLink + " target='_blank'>" + name + "</a>");
infoContent.push("name" + name + "<br>address: "+address);
// var link = response.getDataTable().getValue(i, 0);
// linkList.push(link);
}
names = newLinkList.join("<br>") ;
outputDiv.innerHTML = numRow+ " results nearby " + sAddress + "<br><br>";
outputDiv.innerHTML += names;
}
});
}
This is the code that is querying the data from the Fusion Table. I'm wondering why the Latitude and Longitude are showing up as (30.xxx, NaN) and (-97.xxx, NaN) when it should be just 30.xxx and -97.xxx. Thank you for your help!

Answer 1

At a guess, column 3 in your data is latitude and column 4 is longitude, correct? If so, then your problem is that you are using google.maps.LatLng incorrectly. The LatLng constructor expects a (lat, long) pair as the arguments, ie:
var latLng = new google.maps.LatLng(latitude, longitude);
and it returns a LatLng object. So, when you call it like this:
var latitude = new google.maps.LatLng(response.getDataTable().getValue(i, 3));
var longitude = new google.maps.LatLng(response.getDataTable().getValue(i, 4));
the constructor thinks you are giving it a latitude with no longitude each time. What you want to do is this:
var inputLatitude = response.getDataTable().getValue(i, 3);
var inputLongitude = response.getDataTable().getValue(i, 3);
var latLng = new google.maps.LatLng(inputLatitude, inputLongitude);
latitudeList.push(latLng.lat());
longitudeList.push(latLng.lng());

Answer 2

This:
var latitude = new google.maps.LatLng(response.getDataTable().getValue(1, 3));
latitudeList.push(latitude);
var longitude = new google.maps.LatLng(response.getDataTable().getValue(i, 4));
longitudeList.push(longitude);
Probably should be:
var latitude =response.getDataTable().getValue(i, 3);
latitudeList.push(latitude);
var longitude = response.getDataTable().getValue(i, 4);
longitudeList.push(longitude);
Or put the combined google.maps.LatLng onto a single array
var latitude =response.getDataTable().getValue(i, 3);
var longitude = response.getDataTable().getValue(i, 4);
latlngList.push(new google.maps.LatLng(latitude,longitude));