Numeric Search Box in Fusion Table with Mutliple Layers -
how doing?
i'm complete fusion tables api novice , stuck set-up of search box. here's question:
goal: create map shows location of american football teams , location of american football fan clubs in belgium.
what i've done far: week i've started create map using 2 different overlays (coming 2 different fusion tables: 1 'clubs' table american football teams , 1 'fans' table american football fan clubs).
i've implemented 2 checkboxes can turn each layer on , off.
where stuck: number of fan clubs start grow in belgium, add search box gives me possibility display fan clubs @ least x number of members.
this "filter" of course apply single 'fans' layer , 'teams' layer need remain unchanged.
in 'fans' fusion table i've got column number of members per fan club.
question: there way build such 'search box' filter if type "50" in search box display fan clubs @ least 50 members?
(so basically, query make table dependent of value enter in search box.)
i've tried following guidelines several articles, stuck: http://gmaps-samples.googlecode.com/svn/trunk/fusiontables/change_query_text_input.html https://developers.google.com/fusiontables/docs/samples/autocomplete
i've added code have far in attachment. grateful if me out this:
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <h3>american football in belgium</h3> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=aizasydjb2uat9b6cfcuijagang63qnqtif6v24&sensor=false"></script> <script type="text/javascript"> function togglelayer(this_layer){ if(this_layer.getmap()) { this_layer.setmap(null) } else { this_layer.setmap(map); } } var layer1=null; var layer2=null; var map=null; function initialize() { map = new google.maps.map(document.getelementbyid("map_canvas"), { center: new google.maps.latlng(50.809406, 4.498901), zoom: 9, maptypeid: google.maps.maptypeid.roadmap }); layer1 = new google.maps.fusiontableslayer({ query: { select: 'fans location', from:'1_n9dxweadvtmhhvyprxpjgk7dmjvbmbbygsufdq' }, map: map }); layer2 = new google.maps.fusiontableslayer({ query: { select: 'club location', from:'1warlqmke1bjknt4qbeslquncjbezpeln6z1xqka' }, map: map }); } </script></head> <body onload="initialize();"> <div> <input type="checkbox" id="show_hide_layer1" checked onchange="togglelayer(layer1)"/> <label> fans </label> <input type="checkbox" id="show_hide_layer2" checked onchange="togglelayer(layer2)"/> <label> clubs </label> </div> <div id="map_canvas" style="width:80%; height:80%"></div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> </body> </html> thank help!
have nice saturday,
andy
the query want is:
query: { select: 'fans location', from:'1_n9dxweadvtmhhvyprxpjgk7dmjvbmbbygsufdq', where: "'number' > "+numfans } on layer1, so:
layer1.setoptions({ query: { select: 'fans location', from:'1_n9dxweadvtmhhvyprxpjgk7dmjvbmbbygsufdq', where: "'number' > "+numfans } });
Comments
Post a Comment