Question

I'm trying to display points from a Google Fusion Table that renders them based on a geocoded event. The event centers the map, displays a marker, but I'd like it to make a new selection on the table based on the new map center and a fixed radius. My attempt is to pass a variable to the spatial query but I'm not sure where to put it or if I'm calling it right.

For that matter, it would be cool to even just use an onClick event to trigger the new query but it's the same problemo.

Thanks in advance...Rafa

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 

<title>Selected Records from Google Fusion Table based on Geocoded Location</title> 

<style>
  body { font-family: Arial, sans-serif; }
  #map_canvas { height: 600px; width:700px; }
</style>

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

var layer;
var geocoder;
var map;
var tableid = 411675;

// initialize the map =====================
function initialize() {

    geocoder = new google.maps.Geocoder();  
  var latlng = new google.maps.LatLng(45.526, -122.6684);
    var myOptions = {
          zoom: 8,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  layer = new google.maps.FusionTablesLayer(tableid);
  layer.setMap(map);    
}

// operates geocoder =====================
function codeAddress() {
    var gcAddress = document.getElementById("gcAddress").value;
    geocoder.geocode( { 'address': gcAddress}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
                layer.setQuery("SELECT Address FROM " + tableid + " WHERE ST_INTERSECTS(Address, CIRCLE(LATLNG(" + position + "), 5000))");
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
}
</script> 
</head> 

<body onload="initialize();"> 
  <div> 
        <input id="gcAddress" type="textbox" value="Hillsboro, OR"> 
        <input type="button" value="Geocode" onclick="codeAddress()">
    </div>
    <div id="map_canvas"></div>
</body>
Was it helpful?

Solution

I think you might have had your expression slightly wrong.

var query = "SELECT Address FROM " + tableid + " WHERE ST_INTERSECTS(Address, CIRCLE(LATLNG" + marker.position + ", 20000))";

I updated the position to read marker.position, removed the brackets as it comes with it's own. I then expanded the radius to 20000 for testing purposes.

This worked for me. If you need to test queries you can use an example such as

http://kh-samples.googlecode.com/svn/trunk/talks/samples/fusiontableslayer.html

As a basis for testing (just save and modify it for your table), hopefully will help a bundle :)

Hope this helps.

Matt

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top