Combine InfoWindow data when overlapping polygons clicked?

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;
    });

}

I use `PostGIS`->`geoJSON`->`[layerName]= new google.maps.Data(); k.addGeoJson(geoJSON,[etc]);` rather than FusionTables. The only way I've found to do this is to take the `latLng` of the click back to PostGIS and do all the data-querying there. Iterating through the features (by `k.ForEach(function (feature) {})`-ing the data layer and getting the geometry results in a series of `Polygon` objects, but have not been able to get the `containsLocation([clickEvent.latLng],[feature.geometry])` utility function to trigger properly. — GT., Apr 19 '17 at 05:39

score 0 · Answer 1 · answered Sep 06 '15 at 00:41

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/

Combine InfoWindow data when overlapping polygons clicked?

1 Answers1