My Google Map Fusion Layer doesn't load when I add a new event?

Question

I have a custom Google Maps Fusion Layer and I am trying to add a checkbox that once it is clicked will switch to a new Fusion Layer on the map.

However, when I add in a new Google Events DomListener to do this, not only does it not work but my original map now no longer loads and I cannot figure out why?

google.maps.event.addDomListener(document.getElementById('houseChoropleth'),
  'click', function() {
  var houseMap = document.getElementById('houseChoropleth');
  layer.setOptions({
  query:{
  select: "col40>>0"",
  from: '16NkOpQVdCaNu8jo1Wvhk8x2LcXBXhyY4dPowkhQ' }
    });
    });

}

My current Javascript code can be viewed here: http://jsfiddle.net/VD9LN/1/

I am using the sample code provided by Google here as a reference on how to implement it: https://developers.google.com/fusiontables/docs/samples/heatmap

Though I changed the heatmap section so it generates my new Layer.

(the changeMap_0 function in my code is for my search bar and works)

Answer 1

You have an extra " in your query:

google.maps.event.addDomListener(document.getElementById('houseChoropleth'),
  'click', function() {
    var houseMap = document.getElementById('houseChoropleth');
    layer.setOptions({
      query:{
        select: "col40>>0"",
        from: '16NkOpQVdCaNu8jo1Wvhk8x2LcXBXhyY4dPowkhQ' 
      }
    });
  });

}

this modified version works for me

with checkbox

Answer 2

is it just me, or do you have an extra " on the select: line

google.maps.event.addDomListener(document.getElementById('houseChoropleth'),'click', function() {
    var houseMap = document.getElementById('houseChoropleth');
    layer.setOptions({
        query:{
            select: "col40>>0"", <--------- ?
            from: '16NkOpQVdCaNu8jo1Wvhk8x2LcXBXhyY4dPowkhQ' }
    });
});
}