Can OPTIONS and STYLES both be used for FusionTableLayer in Google Maps?

Question

When displaying map data from a Google Fusion table onto Google Maps as a layer, there is a very rich set of options available to customize the appearance of map features and the contents of info window. It appears that you can either use your own Style/Info Window generated at run time (i.e. through code on client side), or use the ones that you created in Fusion Tables tool, but not both. It would make sense for the same class of behaviour you are trying to customize for a given map view because there would otherwise be two competing commands for same action. However, I was wondering if I could mix and match it so that Styles is generated on the fly on the client side (using Styles section/directives), but use the "default" Info Window which was set up using Fusion Tables tool.

The following sample code illustrates what I would ideally want to do. Note the presence of both Options and Styles blocks. Options to use the default Info Window. And Styles to customize the appearance of map features.

    layer = new google.maps.FusionTablesLayer({
  ...
  },
  options: {
    //styleID is removed from Options; using Styles below--styleId: 2,
     templateId: 2 //Info Window is left to be the default one.
  }

  //Styles section is used instead of default styleID in "options" above.  
  styles: [{
      where: "filter condition",
      polylineOptions: {
          strokeColor: "#ffbf00",
          strokeWeight: "3"
      }
  }]
});

Answer 1

Yes you can. The styled infowindow contents is available in the click event.

See the documentation:

FusionTablesMouseEvent object specification

The properties of a mouse event on a FusionTablesLayer.

infoWindowHtml | Type:  string | Pre-rendered HTML content, as placed in the infowindow by the default UI.

example fiddle from your previous question: “WHERE” clauses being ignored in Fusion Table Layer in Google Maps

code snippet:

var geocoder = new google.maps.Geocoder();
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  layer = new google.maps.FusionTablesLayer({
    map: map,
    options: {
      // styleId: 2,
      templateId: 2
    },
    heatmap: {
      enabled: false
    },
    query: {
      select: "geometry",
      from: "1D6d93-0iT2zUCw8IvkbpDPYDx2-jA0ZAWXi07mQD",
    },
    styles: [{
      polylineOptions: {
        strokeOpacity: 0.001,
        strokeWeight: 0
      }
    }, {
      where: "SHIFT_ID = 3",
      polylineOptions: {
        strokeOpacity: 1.0,
        strokeColor: "#FFFFFF",
        strokeWeight: 3
      }
    }, {
      where: "SHIFT_ID = 1",
      polylineOptions: {
        strokeOpacity: 1.0,
        strokeColor: "#FF0000",
        strokeWeight: 3
      }
    }, {
      where: "SHIFT_ID = 2",
      polylineOptions: {
        strokeOpacity: 1.0,
        strokeColor: "#ffbf00",
        strokeWeight: "3"
      }
    }]
  });
  geocoder.geocode({
    'address': "Winnipeg, Canada"
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      map.fitBounds(results[0].geometry.viewport);
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

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