Select State based on event listener - google-fusion-tables

Question

I am trying to create an interactive map of the US, whereby when a location is clicked on the state that that point lies in will become shaded.
I have created an event listener that will draw the layer upon clicking, but I can't figure out how to have the Fusion Table only grab the state data.
I have tried with ST_INTERSECTS.
Is this possible with the fusion table query? would it be better/more efficient to create a lookup table of my own with polygons?
Any help is greatly appreciated, very new to the fusiontables and google maps api!
thanks
google.maps.event.addListener(map, 'click', function( event ){
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw',
where: 'ST_INTERSECTS('geometry',Circle(event.latLng,5000))'
}
});
layer.setMap(map);
I can confirm that this works, and only selects California.
where: 'ST_INTERSECTS(geometry,CIRCLE(LATLNG(37.3242,-121.9806),1))'

Answer 1

I FIGURED IT OUT! You have to create vars for the event.latLng coords like this:
clickLat = event.latLng.lat();
clickLng = event.latLng.lng();
(I don't declare them as 'var' because I want them to not be persistent, see below)
and then construct the where filter like this:
where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + clickLat + ',' + clickLng + '),1))'
watch those quotes!
Now, I want each click to clear any previous layer, because I want just one state outlined, this is accomplished by adding a simple check:
if (typeof clickLat !== 'undefined') {
layer.setMap(null)
}
I also don't want this layer to be clickable, because if it is, a huge block of the geometry appears, and I have other information I want displayed anyway, this is accomplished by setting the clickability of the FusionTablesLayer to 'false'.
Here is the complete code, fyi:
google.maps.event.addListener(map, 'click', function( event ){
if (typeof clickLat !== 'undefined') {
layer.setMap(null)
}
clickLat = event.latLng.lat();
clickLng = event.latLng.lng();
layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw',
where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + clickLat + ',' + clickLng + '),1))'
},
styles: [{
polygonOptions: {
strokeColor: "#5e3cff",
strokeWeight: 3,
fillColor: "#9d9d9d",
fillOpacity: 0.2,
}
}],
clickable: false
});
layer.setMap(map);
});