Search code examples
javascriptgoogle-mapsgoogle-fusion-tables

Make a polygon link to another page using Google Maps API and Fusion Tables


I'm trying to figure out how to make a Google Maps polygon (the entire polygon) that is created by Google Fusion tables to be a clickable link to a different page. I had originally thought to add an event listener to the polygon and use "this" but I forgot that that won't work because I'm not generating the polygon, the fusion table is. If anyone could point me in the right direction or help it would be greatly appreciated!

What I have so far is the normal code for a fusion table:

var map;
var layer_1;

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(33.205, -97.1325),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer_1 = new google.maps.FusionTablesLayer({
    suppressInfoWindows: true,
    query: {
      select: "col0",

      from: "/*Fustion Table ID*/",

    },
    map: map,
    styleId: 2,
    templateId: 2
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

I was thinking I could add a listener such as:

google.maps.event.addListener(polygon, 'click', function (event) {
     //Find the polygon's website URL
    });  

And use that to trigger a page redirect such as

window.location.replace(...)

to more or less make the polygon a giant link, but I have been advised against this.


Solution

  • A FusionTableLayer has a FusionTablesMouseEvent, which contains all the information from that row of the table, in its row property:

    row | Object. | A collection of FusionTablesCell objects, indexed by column name, representing the contents of the table row which included the clicked feature.)

    Use it like this (the exact code will depend on your table, which you haven't shared):

    layer_1 = new google.maps.FusionTablesLayer({
        suppressInfoWindows: true,
        query: {
          select: "col0",
    
          from: "/*Fustion Table ID*/",
    
        },
        map: map,
        styleId: 2,
        templateId: 2
      });
    google.maps.event.addListener(layer_1, 'click', function(evt) {
       // code to open the URL based on the data in that row of your fusion table
    });