public
Created

Google Fusion Layer querying test

  • Download Gist
fusion_layer_test.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
 
<title>Test Fusion Mapping</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
var numeric_id = 3195033,
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4,-122.1),
zoom: 2,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Latitude,Longitude',
from: numeric_id
},
map: map
});
 
google.maps.event.addDomListener(
document.getElementById('goFilter'), 'click', function() {
doFilter(layer, numeric_id, map);
}
);
}
google.maps.event.addDomListener(window, 'load', init);
 
function doFilter(layer, numId, map) {
var inp = document.getElementById('nameInp'),
query = {
select: 'Latitude,Longitude',
from: numId
};
if(inp.value !== '')
query.where = "Name CONTAINS IGNORING CASE '" + inp.value + "'";
console.log("setting where to", query);
if(!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({query: query});
}
</script>
<style>
#map-canvas { height: 600px; }
</style>
</head>
<body>
<div id="map-canvas"></div>
<div>Name:
<input id="nameInp" type="text" />
</div>
<button id="goFilter">
Filter Data
</button>
<input type="reset" id="reset" value="clear" />
</div>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.