Question

here’s a Fusion Tables map that’s broken after a search. It does everything well before I do a search. The points on the map just don’t show (although the information in the table below it gets updated).

What am I doing wrong?

//write the map on page load
$(document).ready(function() {

    createMap();

});

//ft layer
var layer;

//ft table
var tableid = 4176964;

//map
var map;

//geocoder instance
var geocoder = new google.maps.Geocoder();

//infowindow
var infowindow;

//gviz
var table;

//FT data in gviz object
var datatable;

//center of map
var center = new google.maps.LatLng(52.146973340644735, 4.7021484375);

//default zoom
var zoom = 7;
google.load('visualization', '1', {
    'packages': ['table']
});

function createMap() {
    //map options
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: center,
        zoom: zoom,
        minZoom: 2,
        maxZoom: 12,
        scrollwheel: true,
        disableDragging: true,
        mapTypeControl: false,
        navigationControl: true,
        streetViewControl: false,
        scaleControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL,
            position: google.maps.ControlPosition.RIGHT_TOP
        }
    });

    //intial fusion layer & supress fusion info window
    layer = new google.maps.FusionTablesLayer(tableid, {
        suppressInfoWindows: true,
        query: "SELECT Latitude FROM " + tableid,
        map: map
    });

    //adds click listener on layer
    google.maps.event.addListener(layer, 'click', function(e) {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
        if (infowindow) infowindow.close();
        else infowindow = new google.maps.InfoWindow();

        //write FT data to info window
        text = infowindow.setContent('<p>Op <b>' + e.row['Datum'].value + '</b> storte een ' + e.row['Type'].value + ' van ' + e.row['Vliegmaatschappij'].value +' met registratienummer ' + e.row['Registratie'].value + ' neer bij <b>' + e.row['Locatie'].value + '</b>.<p><p>Hierbij overleden ' + e.row['Slachtoffers'].value + ' van de ' + e.row['Inzittenden'].value + ' inzittenden en ' + e.row['Grond'].value + ' overleden op de grond.<p><p><a href="http://aviation-safety.net/database/record.php?id=' + e.row['ASN'].value + '" target="_blank">Meer informatie op Aviation Safety Network</a>.');

        infowindow.setPosition(e.latLng);
        map.setCenter(e.latLng);
        infowindow.open(map);
    });

    //query FT data for visualization
    var queryText = encodeURIComponent("SELECT Datum, Locatie, Type, Registratie, Vliegmaatschappij, Slachtoffers, Inzittenden, Grond FROM 4176964 ORDER BY 'Datum' ASC");
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
    query.send(getData);
}

//write FT data to table
var getData = function(response) {
    console.log('getData');
    console.log(response);
    table = new google.visualization.Table(document.getElementById('visualization'));
    datatable = response.getDataTable();
    table.draw(datatable, {
        showRowNumber: true
    });

    //add table listener when row clicked
    google.visualization.events.addListener(table, 'select', selectHandler);
}

//match table data to map data

function selectHandler() {

    //get lat/lng from FT
    var selection = table.getSelection();
    var Datum = datatable.getValue(selection[0].row, 0);
    var Locatie = datatable.getValue(selection[0].row, 1);    
    var Type = datatable.getValue(selection[0].row, 2);
    var Registratie = datatable.getValue(selection[0].row, 3);
    var Vliegmaatschappij = datatable.getValue(selection[0].row, 4);
    var Slachtoffers = datatable.getValue(selection[0].row, 5);   
    var Inzittenden = datatable.getValue(selection[0].row, 6);
    var Grond = datatable.getValue(selection[0].row, 7);

    infoWindowContent = ('<p>Op <b>' + e.row['Datum'].value + '</b> storte een ' + e.row['Type'].value + ' van ' + e.row['Vliegmaatschappij'].value +' met registratienummer ' + e.row['Registratie'].value + ' neer bij <b>' + e.row['Locatie'].value + '</b>.<p><p>Hierbij overleden ' + e.row['Slachtoffers'].value + ' van de ' + e.row['Inzittenden'].value + ' inzittenden en ' + e.row['Grond'].value + ' overleden op de grond.<p><p><a href="http://aviation-safety.net/database/record.php?id=' + e.row['ASN'].value + '" target="_blank">Meer informatie op Aviation Safety Network</a>.');

}


function changeSearch(dater) {
    dater = document.getElementById('newDatum').value;
    console.log('dater: ' + dater);

    //with a query based on the variables
    var sql = "SELECT Datum, Locatie, Type, Registratie, Vliegmaatschappij, Slachtoffers, Inzittenden, Grond FROM " + tableid + " WHERE Datum CONTAINS '" + dater + "' ORDER BY 'Datum' ASC";
    var polySql = "SELECT Latitude FROM " + tableid + " WHERE Datum CONTAINS '" + dater + "'";
    console.log('SQL: ' + sql);
    console.log('Polygon-SQL: ' + polySql);
    layer.setOptions({
        query: polySql,
        map: map
    });
    var queryText = encodeURIComponent(sql);
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
    query.send(getData);

    //adds a click listener on search layer
    google.maps.event.addListener(layer, 'click', function(e) {
        if (infowindow) infowindow.close();
        else infowindow = new google.maps.InfoWindow();

        //writes the info window on search layer
        infowindow.setContent('<p>Op <b>' + e.row['Datum'].value + '</b> storte een ' + e.row['Type'].value + ' van ' + e.row['Vliegmaatschappij'].value +' met registratienummer ' + e.row['Registratie'].value + ' neer bij <b>' + e.row['Locatie'].value + '</b>.<p><p>Hierbij overleden ' + e.row['Slachtoffers'].value + ' van de ' + e.row['Inzittenden'].value + ' inzittenden en ' + e.row['Grond'].value + ' overleden op de grond.<p><p><a href="http://aviation-safety.net/database/record.php?id=' + e.row['ASN'].value + '" target="_blank">Meer informatie op Aviation Safety Network</a>.');

        infowindow.setPosition(e.latLng);
        map.setCenter(e.latLng);
        infowindow.open(map);
    });
}
//end function

Answer 1

This works for a query on the map:
SELECT Latitude FROM 4176964 WHERE Datum <= ’16 JAN 1950′

I suspect you need to treat the data as a number (even though you specify it as a string)