“WHERE” clauses being ignored in Fusion Table Layer in Google Maps

Question

I am trying to use a Google Fusion table as a layer in Google maps via API. Just adding the layer to the Google Map using FusionTableLayer() works fine. I can see the map and all. The "fun" begins when I try to apply a filter (i.e. a "where clause") to the select query or to the Styles section. The filters just do not work! It does not throw any error. Map keeps on working. But the result set is not filtered down--as if the where clause wasn't even there. The same symptoms for the 'where' clause used for the Styles section. It is completely ignored. I have three different styles, which I want applied based on filter conditions. All of the those are ignored. The strange thing is that the very last style section listed in the Styles block gets applied to ALL features in the fusion table layer. I verified it by switching the sections around. I tried replacing the actual field names by the references like "col10", but that didn't make any difference.

What am I missing? How can I "enable" the use of WHERE clauses in my FusionTableLayer so that they get applied both in the Select query, and also in the Styles sections?

Note: in the code snippet below, the (//) comments were inserted for this post. These comments do not exist in the actual page/code I am developing.

  layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
     select: "col11",
     from: "1D6d93-0iT2zUCw8IvkbpDPYDx2-jA0ZAWXi07mQD",
     //the following filter in select query does not work! 
     //I replaced col10 with actual field name (shift_id) but still EVERYTHING from the table is returned
     where: "col10 <= 3" 
  },
        styles: [{
          //this where clause has no effect. I've tried replacing shift_id with col10.
          where: "((shift_id != 1) AND (shift_id != 2))",
          polylineOptions: {
            strokeColor: "#FFFFFF",
            strokeWeight: "3"  }
        }, {
          //this where clause has no effect. I've tried replacing shift_id with col10.
          where: "shift_id == 1",
          polylineOptions: {
            strokeColor: "#FF0000",
            strokeWeight: "3"  }
        }, {
          //this where clause has no effect. I've tried replacing shift_id with col10.
          //whichever of these three blocks is listed last is the one that gets applied to the layer.
          where: "shift_id == 2",
          polylineOptions: {
            strokeColor: "#ffbf00",
            strokeWeight: "3"  }
        }] 
});

Answer 1

1. "==" doesn't work, use "="
2. don't include the where in the main query

layer = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: {
        enabled: false
    },
    query: {
        select: "geometry",
        from: "1D6d93-0iT2zUCw8IvkbpDPYDx2-jA0ZAWXi07mQD",
    },
    styles: [{
        where: "((SHIFT_ID != 1) AND (SHIFT_ID != 2))",
        polylineOptions: {
            strokeColor: "#FFFFFF",
            strokeWeight: "3"
        }
    }, {
        where: "SHIFT_ID = 1",
        polylineOptions: {
            strokeColor: "#FF0000",
            strokeWeight: "3"
        }
    }, {
        where: "SHIFT_ID = 2",
        polylineOptions: {
            strokeColor: "#ffbf00",
            strokeWeight: "3"
        }
    }]
});

proof of concept fiddle

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,
    heatmap: {
      enabled: false
    },
    query: {
      select: "geometry",
      from: "1D6d93-0iT2zUCw8IvkbpDPYDx2-jA0ZAWXi07mQD",
    },
    styles: [{
      where: "((SHIFT_ID != 1) AND (SHIFT_ID != 2))",
      polylineOptions: {
        strokeColor: "#FFFFFF",
        strokeWeight: "3"
      }
    }, {
      where: "SHIFT_ID = 1",
      polylineOptions: {
        strokeColor: "#FF0000",
        strokeWeight: "3"
      }
    }, {
      where: "SHIFT_ID = 2",
      polylineOptions: {
        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>

Answer 2

Two suggestions:

1. Make sure the column you're filtering on in the select query is formatted as a number, not text, since you're checking <=; and

2. The column names are case sensitive - you have used upper case in the Fusion Table, SHIFT_ID.