Basic Fusion Tables API: How do you do an update query correctly?

Question

i am referring to an Fusion Tables API Example „Update Query“ https://developers.google.com/fusiontables/docs/samples/change_query It's is about a drop-down menu which alters the content of the layer upon the map.

I tried to rebuild the whole example on my own site, but i didn't work out yet. I narrowed down possible mistakes and pitfalls to the part where the layer (with data from my google fusion table) gets initialized. It looks like that in the google example:

    var layer = new google.maps.FusionTablesLayer({
      query: {
        select: locationColumn,
        from: tableId
      },
      map: map
    });

Here is the code which worked out for me in every of my own examples with fusion tables, except for the one shown above.

var layer = new google.maps.FusionTablesLayer(tableid)
layer.setMap(map);

Here is the link for the live code: http://krealeo12.appspot.com/

As i am new to this whole API and JavaScript thing, i can not distinguish why the first example doesn't work and the second does?! What is the difference, and more important, what does it mean?

I am very thankful for every hint and advice! J.

Answer 1

This issue also confused me when I started using Fusion Tables. You will find many examples where deprecated methods are used:

var layer = new google.maps.FusionTablesLayer(tableid)
layer.setMap(map);
layers.setQuery("select * from " + tableid + " where ridership > 5000");

The first example you quote is the proper way to do it. What was most confusing is that you cannot combine the two approaches. E.g. last time I checked, the following will not work. The initial map will display fine but the query will not work.

var layer = FusionTablesLayer(tableid);
var layer.setOptions{
    query: {
     select: 'address',
     from: '198945',
     where: 'ridership > 5000'
  }
});

The proper way is described in the docs

Answer 2

Really another question, so I'm adding a new answer. You've got an error in your updateMap() function.

 function updateMap(layer, tableid, locationColumn) {
        var sportart = document.getElementById('search-string').value;
        if (sportart) {
          layer.setOptions({
            query: {
              select: locationColumn,
              from: tableid,
              where: "sportart = '" + search-string + "'" // ERROR
            }
          });
        } else {
          layer.setOptions({
            query: {
              select: locationColumn,
              from: tableid
            }
          });
        }
      }

The select list search value is called "sportart" not "search-string".

Answer 3

Google does not provide error messages from queries, so you may need to use trial and error and a search for examples to get results. This worked for me. Note the quotes around the whole string (as you'd expect), plus the quotes around the date.

     layer.setOptions({
       query:{
            select: "col1",
            from: "1Ayaf5aKAanSv6HAtsTLtcAhrnpF94XyuNZ9u_Sk",
            where: "Date<'01/01/2011'"
         },
         styles:[{
                 markerOptions:{
                        iconName:'measle_gray'
                }
            }]
      });           

A useful but hard-to-find page describes acceptable date formats, among other things: https://developers.google.com/fusiontables/docs/v1/sql-reference I do not know why many colors of small dot are called "measle_" rather than "small_"

Answer 4

You can use this,

 var fusionOptions = {

          query: {
            select: "Geometry",
            from: "tableId",
            where: ""
          },

        styles: [{

          where: 'Available_Impressions <  605173',
          polygonOptions: {
            fillColor: '#88bad8',
            fillOpacity: 0.8
          }
        }, {
          where: 'Available_Impressions > 605173',
          polygonOptions: {
            fillColor: '#5792c3',
            fillOpacity: 0.8
          }
        }, {
          where: 'Available_Impressions > 1210347',
          polygonOptions: {
            fillColor: '#4572ab',
            fillOpacity: 0.8
          }
        }]          

    }