Fusion Table layer dropdown query pan and zoom not working -
i trying google map pan , zoom selected dropdown option. dropdown query working new coding , can't figure out wrong code map pan , zoom query results. column heading "query" on google fusion table, getting confused.
here example of want map do: http://www.geocodezip.com/geoxml3_test/www_advocacy_ucla_edu_assembly_mapc.html
and got sections of pan/zoom code from: http://www.geocodezip.com/geoxml3_test/v3_so_fusiontables_pan2marker.html
and, here code:
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <!-- <link href="style.css" rel="stylesheet" /> --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var tableid = '15woskaehc0gcpu_n6upbxpl09rrebklqneacmnu'; var locationcolumn = 'lat'; map = new google.maps.map(document.getelementbyid('googft-mapcanvas'), { center: new google.maps.latlng(34.03,-111.9), zoom: 10, maptypeid: google.maps.maptypeid.roadmap }); map.controls[google.maps.controlposition.right_bottom].push(document.getelementbyid('googft-legend')); layer = new google.maps.fusiontableslayer({ map: map, heatmap: { enabled: false }, query: { select: locationcolumn, from: tableid }, options: { styleid: 3, templateid: 3 } }); layer . setmap ( map ); google.maps.event.adddomlistener(document.getelementbyid('query'), 'change', function() { updatemap(layer, tableid, locationcolumn); }); } // update query sent fusion table layer based on // user selection in select menu function updatemap(layer, tableid, locationcolumn) { var query = document.getelementbyid('query').value; if (query) { layer.setoptions({ query: { select: locationcolumn, from: tableid, where: "query = '" + query + "'" } }); pantomarker(query, tableid, locationcolumn); } else { layer.setoptions({ query: { select: locationcolumn, from: tableid } }); } } function pantomarker(query, tableid, locationcolumn) { var querystr = "select "+locationcolumn+" "+tableid+" query = "+query+";"; document.getelementbyid('query').innerhtml = querystr; var querytext = encodeuricomponent(querystr); var query = new google.visualization.query('http://www.google.com/fusiontables/gvizdata?tq=' + querytext); query.send(panto); } function panto(response) { if (!response) { alert('no response'); return; } if (response.iserror()) { alert('error in query: ' + response.getmessage() + ' ' + response.getdetailedmessage()); return; } ftresponse = response; //for more information on response object, see documentation //http://code.google.com/apis/visualization/documentation/reference.html#queryresponse numrows = response.getdatatable().getnumberofrows(); numcols = response.getdatatable().getnumberofcolumns(); var geoxml = new geoxml3.parser(); var kml = ftresponse.getdatatable().getvalue(0,0); geoxml.parsekmlstring("<placemark>"+kml+"</placemark>"); geoxml.docs[0].markers[0].setmap(null); map.setcenter(geoxml.docs[0].markers[0].getposition()); if (map.getzoom() < 10) map.setzoom(10); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="wrapper"> <table> <tr> <td> <div id="menu" style="background-color:#efe0b9;height:500px;width:150px;float:left;"> <label><b>select:</b></label> <select id="query"> <option value="bishop creek">bishop creek</option> <option value="blue spring">blue spring</option> <option value="blue wash">blue wash</option> <option value="bronco creek">bronco creek</option> <option value="camp creek">camp creek</option> <option value="cave creek">cave creek</option> <option value="columbine spring">columbine spring</option> <option value="copper creek">copper creek</option> <option value="cottonwood creek">cottonwood creek</option> <option value="davenport wash">davenport wash</option> <option value="deadman creek">deadman creek</option> <option value="grapevine canyon">grapevine canyon</option> <option value="holmes canyon">holmes canyon</option> <option value="horse creek">horse creek</option> <option value="jacks gulch">jacks gulch</option> <option value="lime creek upper">lime creek upper</option> <option value="lime creek lower">lime creek lower</option> <option value="mud spring">mud spring</option> <option value="new river">new river</option> <option value="rackensack canyon">rackensack canyon</option> <option value="red creek">red creek</option> <option value="red creek middle">red creek middle</option> <option value="round tree canyon">round tree canyon</option> <option value="seven springs">seven springs</option> <option value="silver creek">silver creek</option> <option value="sheep creek">sheep creek</option> <option value="squaw creek">squaw creek</option> <option value="sycamore creek">sycamore creek</option> <option value="sycamore creek hk ranch">sycamore creek hk ranch</option> <option value="tangle creek">tangle creek</option> <option value="two mile spring">two mile spring</option> <option value="verde river">verde river</option> <option value="walnut spring">walnut spring</option> <option value="wet bottom creek">wet bottom creek</option> </select> <br><br><br><br><br><br><br> </td> <td> <div id="googft-mapcanvas" style="width:700px; height:600px;"> </td> </div> </body> </html> i have no idea doing wrong, appreciate if point me in right direction!! =d
the code attempting use gviz query, api not included. add:
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});the code attempting parse kml lat column, isn't kml, 2 column location. remove:
var geoxml = new geoxml3.parser(); var kml = ftresponse.getdatatable().getvalue(0,0); geoxml.parsekmlstring("<placemark>"+kml+"</placemark>"); geoxml.docs[0].markers[0].setmap(null); map.setcenter(geoxml.docs[0].markers[0].getposition()); if (map.getzoom() < 10) map.setzoom(10);
replace with:
var bounds = new google.maps.latlngbounds(); (var i=0; i<numrows; i++) { var lat = ftresponse.getdatatable().getvalue(i,0); var lng = ftresponse.getdatatable().getvalue(i,1); var point = new google.maps.latlng(lat,lng); bounds.extend(point); } if (numrows == 1) map.setcenter(point); else map.fitbounds(bounds); if (map.getzoom() < 10) map.setzoom(10); change gviz query to:
var querystr = "select lat,long "+tableid+" query = '"+query+"';";
Comments
Post a Comment