fusion table google maps infowindow return specific column

Question

I'm using fusion table to add a layer of polygons (district lines) to a google map in javascript. But I want to display on the infowindow, when you click on the polygon on the map, a specific column instead of all column values that's currently displaying by default.

Here's my code, I got it to return some location info. The default infowindow is disabled. So within the click event, how do you reference the fusion table?

layer = new google.maps.FusionTablesLayer({
    suppressInfoWindows: true,
    query:{
      from:tableid,
      select: 'geometry'
    },
    styles:[{polygonOptions:{fillOpacity:0.01}}
    ],
    options: {
      styleId: 2,
      templateId: 2
    }});
    layer.setOptions({query:{select:'geometry',
                  from: tableid}});
    layer.setMap(map);

google.maps.event.addListener(layer, 'click', function(event) {
alert(event.latLng.lat() + ", " + event.latLng.lng());
});

My fusion table has a column named ID, when I click on the polygon I should just see the ID number associated.

Tried to do this but nothing shows up:

e.infoWindowHtml = "ID" + e.row['ID'].value;

Thanks.

Answer 1

The FusionTablesMouseEvent contains a reference to the row of the table that contains the clicked polygon.

google.maps.event.addListener(layer, 'click', function(event) {
  infoWindow.setContent(event.row["ID"].value);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
});

proof of concept fiddle (this table doesn't contain a column ID, but the column "name" shows the concept)

code snippet:

var tableid = "1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ"
var infoWindow;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  infoWindow = new google.maps.InfoWindow();
  layer = new google.maps.FusionTablesLayer({
    suppressInfoWindows: true,
    query: {
      from: tableid,
      select: 'geometry'
    },
    styles: [{
      polygonOptions: {
        fillOpacity: 0.01
      }
    }],
    options: {
      styleId: 2,
      templateId: 2
    }
  });
  layer.setOptions({
    query: {
      select: 'geometry',
      from: tableid
    }
  });
  layer.setMap(map);

  google.maps.event.addListener(layer, 'click', function(event) {
    console.log(event.row["name"].value);
    console.log(event.latLng.toUrlValue(6));
    infoWindow.setContent(event.row["name"].value);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>