Combine InfoWindow data when overlapping polygons clicked? - google-maps

Question

Is it possible to combine all polygon data (description & name) at a specific point into one InfoWindow when clicked? I have some overlapping polygons and the InfoWindow only displays the data from the topmost one. It seems this should be possible using Fusion Tables and a click listener on the map so that when someone clicks on the map, a query is sent to Fusion Tables to find all the Polygons that intersect with the point that was clicked (using ST_INTERSECTS with a CIRCLE and a very small radius). The only columns in my Fusion Table are Name, Description, and Geometry (containing standard KML ).
This is as far as I am with it. Polygons are displaying and circle is being rendered and centered onclick. InfoWindow is displaying [object Object].
var lat = 37.4;
var lng = -122.1;
var tableid = '1mxcz4IDL1U7ItrqulVzt01fMasj5zsmBFUuQh6iM';
var meters = 10000;
layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: tableid,
}
});
layer.setMap(map);
google.maps.event.addListener(layer, 'click', function(event) {
changeCenter(event);
});
function changeCenter(event) {
lat = event.latLng.lat();
lng = event.latLng.lng();
circle.setCenter(event.latLng);
}
circle = new google.maps.Circle({
center: new google.maps.LatLng(lat, lng),
radius: meters,
map: map,
fillOpacity: 0.2,
strokeOpacity: 0.5,
strokeWeight: 1,
});
comboname = new google.maps.FusionTablesLayer({
query: {
select: 'name',
from: tableid,
where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + lat + ',' + lng + '),' + meters + '))'
}
});
google.maps.event.addListener(layer, 'click', function(e) {
// Display all of the names in the InfoWindow
e.infoWindowHtml = comboname;
});
}

Answer 1

A FusionTablesLayer doesn't provide any data related to the displayed features.
When you want to get data from the FusionTable you must request them via the REST-API (this also happens when the API will open an InfoWindow, when you take a look at the Network-Traffic you'll see that there is a request which loads the data for the InfoWindow).
The REST-API supports JSONP, so you may request the data directly via JS.
Requirements for SELECT
a valid google-API-key
the service Fusion Tables API must be enabled for the project
The FusionTable must be configured as downloadable (the table in your example already is downloadable)
Sample-implementation:
function initialize() {
var goo = google.maps,
//your google maps API-key
gooKey = 'someGoogleApiKey',
//FusionTable-ID
ftId = '1mxcz4IDL1U7ItrqulVzt01fMasj5zsmBFUuQh6iM',
//1km should be sufficient
meters = 1000,
map = new goo.Map(document.getElementById('map_canvas'),
{
zoom: 6,
center: new goo.LatLng(36.8,-111)
}),
//we use our own InfoWindow
win = new goo.InfoWindow;
//function to load ft-data via JSONP
ftQuery = function(query,callback){
//a random name for a global function
var fnc = 'ftCallback'+ new Date().getTime()
+ Math.round(Math.random()*10000),
url = 'https://www.googleapis.com/fusiontables/v2/query?',
params = {
sql : query,
callback : fnc,
key : gooKey
},
get =[],
script = document.querySelector('head')
.appendChild(document.createElement('script'));
for(var k in params){
get.push([encodeURIComponent(k),
encodeURIComponent(params[k])
].join('='));
}
window[fnc]=function(r){
callback(r);
delete window[fnc];
document.querySelector('head').removeChild(script);
}
script.setAttribute('src',url+get.join('&'));
},
ftLayer = new goo.FusionTablesLayer({
query: {
select: 'geometry',
from: ftId,
},
map:map,
suppressInfoWindows:true
});
goo.event.addListener(ftLayer,'click',function(e){
var sql ='SELECT name FROM ' + ftId +
' WHERE ST_INTERSECTS(geometry,'+
' CIRCLE(LATLNG(' +e.latLng.toUrlValue()+ '),'+ meters + '))',
cb = function(response){
if(response.error){
try{
alert(response.error.errors[0].message);
}
catch(e){
alert('error while retrieving data from fusion table');
}
return;
}
var content = [];
for(var r = 0; r < response.rows.length; ++r){
content.push(response.rows[r][0]);
}
//open the infowindow with the desired content
win.setOptions({
content:'<ol><li>'+content.join('</li><li>')+'</li></ol>',
map:map,
position:e.latLng
});
};
ftQuery(sql,cb);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Demo: http://jsfiddle.net/doktormolle/ckyk4oct/