Search code examples
javascriptgoogle-maps-api-3kmlgoogle-fusion-tables

Clickable / Linked polygons? Google Maps API + Fusion Tables / KML


I found this Q/A that seemed to be the answer:

var polygon = google.maps.Polygon(....);
polygon.addListener('click', function(){

});

...but the problem is that I don't understand a word of it. I'm not even positive this is actually what I'm looking for.

What does the (....) stand for? Where would this pull the actual URL from? Would I add a column to my fusion table with the URL, and then somehow call a particular cell based on it's country code?

This is the code I'm currently using for my country polygons, pulling the KML from fusion tables.

var layer = new google.maps.FusionTablesLayer({
    suppressInfoWindows: true,
    query: {
        select: 'geometry',
        from: '1LfVcxsno9k3l2zgKS_fwoyv9vc-ba7aoQEz0aKM'
    },
    styles: [{
        polygonOptions: {
        fillColor: '#5E5E5E',
        fillOpacity: 0.3
        }
      }]
    });
layer.setMap(map); 
}

Solution

  • In the example you are looking at the (....) would be replaced with a PolygonOptions object, similar to the FusionTablesOptions that you are using to create your layer with.

    An event is then bound to the polygon that was created.

    However in your case you are not creating individual polygons, but instead creating a FusionTablesLayer.

    The answer here gives an example for binding a click event listener to a FusionTablesLayer object.