JQuery slider does not move when used with Google Fusion Table

Question

I have a little problem regarding to JQuery Slider and Google Fusion Table. This is a Google Map application. I have several locations stored in the Fusion Table, and they will be displayed on the map during the map initialization. Of course, this is not that interesting so I want to add a JQuery Slider so that the locations appeared on the map can dynamically change when user interacts with slider, by setting the event callback function. However, the slider does not move, even with the following piece of code, which should be very straightforward.

All I did is initializing the map and slider. There are two lines in the slider's callback function, the first one displays on the webpage the current value of slider, ranging from 0 to 100； the second one queries the fusion table again to reflect the updated data (here I just simplified the query so that it just selects all the entries and sends them back, so the data displayed on the map will not change even if one interacts with the slider).

In Chrome， what I got is the map initialized successfully, with all the data points shown. However, when I tried to move slider, it just stays there, but the value of the slider (what line 1 shows) does change. However, if I comment out line 2, everything is fine, the slider can move freely, though not sending any query...

Does anyone have any experience about using Maps, fusion table and JQuery slider at the same time? Any suggestion is appreciated.

Below is the code:

  // initialize map
  function initialize() {
      var place = new google.maps.LatLng(30, -120);

      map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: place,
        zoom: 4,
        mapTypeId: 'terrain'
      });

      var layer = new google.maps.FusionTablesLayer('132848');
      layer.setMap(map);
  }

  // define the JQuery Slider
  $(function(){
    $('#slider').slider({
        max: 100,
        min: 0,
        step: 1,
        value: 0,
        slide: function(event, ui) {
            document.getElementById("slider-value").innerHTML = ui.value + " mi";// line 1
            layer.setQuery('select Location from 132848');// line 2
        }
    });
  });

Answer 1

As Eric already pointed out, layer must be in the global scope, so that the slider is able to access it. I slightly change your code, because I think it's easier to understand and read when using the layer.setOptions() syntax, but that's just a matter of taste. I used the slider filter for the distance field, change it to anything you like :-)

Here is a demo of my adapted code: http://jsfiddle.net/odi86/kb4TV/

var layer;
var tableId = '132848';
var map;

// initialize map
function initialize() {
    var place = new google.maps.LatLng(30, -120);
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: place,
        zoom: 4,
        mapTypeId: 'terrain'
    });

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

// define the JQuery Slider
$(function() {
    $('#slider').slider({
        max: 100,
        min: 0,
        step: 1,
        value: 0,
        slide: function(event, ui) {
            document.getElementById("slider-value").innerHTML = ui.value + " mi";
            layer.setOptions({
                query: {
                    select: "Location",
                    from: tableId,
                    where: "distance <= " +  ui.value
                }
            });
        }
    });
});​