google-mapsgoogle-fusion-tables

FusionTablesLayer where clause not filtering data


I have been looking at a lot of examples recently on how to use the FusionTablesLayer to display an area on a Google Map. I have put together a fusion table and have created a view for it. This can be found here (View of Data).

However, the following snippet of code does not seem to filter the data based on the where clause.

var provinces = new google.maps.FusionTablesLayer({
   map: $scope.map,
   query: {
     select: "*",
     from: "1NpDIypHO58j9k1BAOr1tniCgoOPUkdbKBsXgTVCS",
     where: "'PROVINCE' = '02'",
     limit: 100
   },
   suppressInfoWindows: true
});

This actually still fetches and shows all the four provinces and seems to disregard the where clause.


Solution

  • Don't use "*" for the select, that should be the column containing the geographic information (in your case geometry).

    proof of concept fiddle

    code snippet:

    function initialize() {
      var map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(52.669177995538305, -7.1375505556775405),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
    
      layer = new google.maps.FusionTablesLayer({
        map: map,
        heatmap: {
          enabled: false
        },
        query: {
          select: "geometry",
          from: "1NpDIypHO58j9k1BAOr1tniCgoOPUkdbKBsXgTVCS",
          where: "PROVINCE = '02'"
        },
        options: {
          styleId: 2,
          templateId: 2
        }
      });
    
    }
    google.maps.event.addDomListener(window, "load", initialize);
    html,
    body,
    #mapDiv {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <div id="mapDiv"></div>