javascript - Google Maps and Fusion Tables - Get result in Popup Window that will be display the Map -
i have problems improve code (i not know if can done). map base on geocodezip example http://www.geocodezip.com/geoxml3_test//v3_fusiontables_countrybrowser_encryptedid.html , , want when click on attribute value (polygon name) inside sidebar result in popup window display map (with polygon click inside sidebar); @ javascript window open example http://www.tizag.com/javascriptt/javascriptpopups.php. have not done code because not know start, code use below. have suggestions.
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>usa7</title> <style type="text/css"> html, body, #map_canvas { width: 750px; height: 600px; margin: 0; padding: 0; } .infowindow * {font-size: 90%; margin: 0} .style1 {color: #ffffff} </style> <!--load ajax api--> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="https://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> <!-- initialize --> <script type="text/javascript"> // globals var map = null; var infowindow = null; var geoxml = null; var geoxmldoc = null; var mylatlng = null; var myoptions = null; var mapcenter = null; var geocodethecountry = true; var gpolygons = []; var geocoder = null; // fusion table data id var ft_tableid = '1goqhj9e9ff_rfl_cltgnlgxf3sseaywn4_lvnua'; // original '1-bzhrr6ombj4nwzcy8xnvjpijvv97yngsxsf_me'; var countryname = "usa"; // "united states of america"; google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']}); function createsidebar() { // set query using parameters document.getelementbyid('sidebar').innerhtml = "querying data"; var ft_query2 = "select 'statefp', 'name', 'geometry' "+ft_tableid+" 'statefp' = '"+countryname+"' order 'name'"; document.getelementbyid("ftquery2").innerhtml = ft_query2; var querytext = encodeuricomponent(ft_query2); var query = new google.visualization.query('http://www.google.com/fusiontables/gvizdata?tq=' + querytext); //set callback function query.send(getdata); } // set callback run when google visualization api loaded. google.setonloadcallback(createsidebar); function getcountrynames() { // set query using parameters var ft_query_countryname = "select 'statefp', count() "+ft_tableid+" group 'statefp' order 'statefp'"; document.getelementbyid("ftquery4").innerhtml = ft_query_countryname; var querytext = encodeuricomponent(ft_query_countryname); var query = new google.visualization.query('http://www.google.com/fusiontables/gvizdata?tq=' + querytext); //set callback function query.send(createcountrydropdown); } function createcountrydropdown(response) { if (!response) { alert('no response'); return; } if (response.iserror()) { alert('error in query: ' + response.getmessage() + ' ' + response.getdetailedmessage()); return; } //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 countrynames = {}; (var = 0; < numrows; i++) { var countryname = response.getdatatable().getvalue(i,0); // countryname = countryname.substring(0,countryname.indexof('(')); countrynames[countryname] = countryname; } var countrynamedropdown = "<select name='country_select' onchange='handleselected(this)'>" countrynamedropdown += '<option selected> - select state id - <\/option>'; (countryname in countrynames) { countrynamedropdown += "<option value='"+countryname+"'>"+countryname+"</option>" // document.getelementbyid('country_list').innerhtml += countryname+"<br>"; } countrynamedropdown += "</select>" document.getelementbyid('dropdown_menu').innerhtml = countrynamedropdown; } // ======= function handles selections select box ==== function handleselected(opt) { if (opt.selectedindex > 0) { countryname = geoxml3.nodevalue(opt[opt.selectedindex]); displaycountry(); } else { alert("please pick country"); } } function displaycountry() { // geocode country var addressstr = countryname; if (addressstr != "baikonur cosmodrome") addressstr += " country"; geocoder.geocode( { 'address': addressstr}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { if (status != google.maps.geocoderstatus.zero_results) { map.setcenter(results[0].geometry.location); map.fitbounds(results[0].geometry.viewport); } else { alert("no results found"); } } else { alert("geocode not successful following reason: " + status); } }); ft_query = "select 'geometry' "+ft_tableid+" 'statefp' = '"+countryname+"';"; gpolygons = []; layer.setquery({select:'geometry',from:ft_tableid,where:"'statefp' = '"+countryname+"'"}); document.getelementbyid("ftquery").innerhtml = ft_query; createsidebar(); } </script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var ftresponse = null; mylatlng = new google.maps.latlng(37.422104808,-122.0838851); // these set initial center, zoom , maptype map // if not specified in query string var lat = 37.422104808; var lng = -122.0838851; var zoom = 18; var maptype = google.maps.maptypeid.roadmap; // if there parameters @ eh end of url, in location.search // looking "?marker=3" // skip first character, not interested in "?" var query = location.search.substring(1); // split rest @ each "&" character give list of "argname=value" pairs var pairs = query.split("&"); (var i=0; i<pairs.length; i++) { // break each pair @ first "=" obtain argname , value var pos = pairs[i].indexof("="); var argname = pairs[i].substring(0,pos).tolowercase(); var value = pairs[i].substring(pos+1); if (argname == "country") {countryname = unescape(value);} value = pairs[i].substring(pos+1).tolowercase(); // process each possible argname - use unescape() if theres chance of spaces if (argname == "geocode") {geocodethecountry = (value != "false");} if (argname == "id") {id = unescape(value);} if (argname == "filename") {filename = unescape(value);} if (argname == "marker") {index = parsefloat(value);} if (argname == "lat") {lat = parsefloat(value);} if (argname == "lng") {lng = parsefloat(value);} if (argname == "zoom") { zoom = parseint(value); mygeoxml3zoom = false; } if (argname == "type") { // v3 documentation 8/24/2010 // hybrid map type displays transparent layer of major streets on satellite images. // roadmap map type displays normal street map. // satellite map type displays satellite images. // terrain map type displays maps physical features such terrain , vegetation. if (value == "m") {maptype = google.maps.maptypeid.roadmap;} if (value == "k") {maptype = google.maps.maptypeid.satellite;} if (value == "h") {maptype = google.maps.maptypeid.hybrid;} if (value == "t") {maptype = google.maps.maptypeid.terrain;} } } if (!isnan(lat) && !isnan(lng)) { mylatlng = new google.maps.latlng(lat, lng); } infowindow = new google.maps.infowindow(); //define callback function, called when results returned function getdata(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(); if (numrows <= 1) { document.getelementbyid('sidebar').innerhtml = "no data"; return; } //concatenate results string, can build table here fusiontabledata = "<table><tr>"; // for(i = 0; < numcols; i++) { fusiontabledata += "<th colspan='2'>" + response.getdatatable().getvalue(1,0) + "</th>"; // } fusiontabledata += "</tr><tr>"; fusiontabledata += "<tr><td colspan='2' align='left'><a href='javascript:showall();'>display polygons in selected state</a></td></tr>"; for(i = 0; < numrows; i++) { // for(j = 0; j < numcols; j++) { /* var kml = response.getdatatable().getvalue(i,2); geoxml.parsekmlstring("<placemark>"+kml+"</placemark>"); */ fusiontabledata += "<td><a href='javascript:myftclick("+i+")'>"+response.getdatatable().getvalue(i, 1) + "</a></td><td><a href='javascript:zoomto("+i+")'>show</a></td>"; // } fusiontabledata += "</tr><tr>"; } fusiontabledata += "</table>" //display results on page document.getelementbyid('sidebar').innerhtml = fusiontabledata; } function infowindowcontent(name, description, id) { content = '<div class="ft_infowindow"><h3>' + name + '</h3><div>' + description + '</div>'; if (typeof id != "undefined") { content += '<a href="javascript:zoomto('+id+');">zoom to</a>'; } content += '</div>'; return content; } function zoomto(id) { loadrow(id); if (gpolygons[id] && gpolygons[id].bounds) { map.fitbounds(gpolygons[id].bounds); var querystr = "select 'geometry' "+ft_tableid+" 'statefp' = '"+countryname+"' , 'name' = '"+gpolygons[id].name+"';" layer.setquery({select:'geometry',from:ft_tableid,where:"'statefp' = '"+countryname+"' , 'name' = '"+gpolygons[id].name+"'"}); document.getelementbyid("ftquery3").innerhtml = querystr; } } function showall() { layer.setquery({select: 'geometry', from:ft_tableid, where:"'statefp' = '"+countryname+"'"}); } function loadrow(row) { if (!gpolygons[row]) { var name = ftresponse.getdatatable().getvalue(row,1); var kml = ftresponse.getdatatable().getvalue(row,2); // create geoxml3 parser click handlers var geoxml = new geoxml3.parser({ map: map, zoom: false, infowindow: infowindow, singleinfowindow: true }); geoxml.parsekmlstring("<placemark>"+kml+"</placemark>"); geoxml.docs[0].gpolygons[0].setmap(null); gpolygons[row] = new object(); gpolygons[row].position = geoxml.docs[0].gpolygons[0].bounds.getcenter(); gpolygons[row].bounds = geoxml.docs[0].gpolygons[0].bounds; gpolygons[row].name = name; } } function myftclick(row) { var description = ftresponse.getdatatable().getvalue(row,0); var name = ftresponse.getdatatable().getvalue(row,1); loadrow(row); var position = gpolygons[row].position; // set , create infowindow if (!infowindow) infowindow = new google.maps.infowindow({}); infowindow.setoptions({ content: infowindowcontent(name, description, row), pixeloffset: new google.maps.size(0, 2), position: position }); // infowindow-opening event handler infowindow.open(map); } function initialize() { myoptions = { zoom: zoom, center: mylatlng, // zoom: 5, // center: mylatlng, maptypeid: maptype }; map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); google.maps.event.addlistener(map, "click", function(event) { infowindow.close(); var ft_click_query="select 'statefp' "+ft_tableid+" st_intersects('geometry',circle(latlng"+event.latlng+", 1));"; // alert(event.latlng+"query="+ft_click_query); // set query using parameters var querytext = encodeuricomponent(ft_click_query); var query = new google.visualization.query('http://www.google.com/fusiontables/gvizdata?tq=' + querytext); document.getelementbyid("ftquery5").innerhtml = ft_click_query; //set callback function query.send(getcountryfromclick); }); geocoder = new google.maps.geocoder(); if (geocoder && geocodethecountry) { geocoder.geocode( { 'address': countryname+" country"}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { if (status != google.maps.geocoderstatus.zero_results) { map.setcenter(results[0].geometry.location); map.fitbounds(results[0].geometry.viewport); } else { alert("no results found"); } } else { alert("geocode not successful following reason: " + status); } }); } var ft_query = "select 'geometry' "+ft_tableid+" 'statefp' = '"+countryname+"';"; var ft_options = { suppressinfowindows: true, query: {from:ft_tableid, select: "geometry", where: "'statefp' = '"+countryname+"'"}}; // https://www.google.com/fusiontables/embedviz?q=select+col18+from+1-bzhrr6ombj4nwzcy8xnvjpijvv97yngsxsf_me+where+col19+%3d+'usa'&viz=map&h=false&lat=34.56204535683132&lng=-86.65887199999997&t=1&z=9&l=col18&y=2&tmplt=2 document.getelementbyid("ftquery").innerhtml = ft_query; layer = new google.maps.fusiontableslayer(/*ft_tableid, */ ft_options); layer.setmap(map); google.maps.event.addlistener(layer, "click", function(event) { infowindow.close(); infowindow.setcontent(infowindowcontent(event.row.name.value,event.row.statefp.value)); infowindow.setposition(event.latlng); infowindow.open(map); }); getcountrynames(); } function getcountryfromclick(response) { if (!response) { alert('no response'); return; } if (response.iserror()) { alert('error in query: ' + response.getmessage() + ' ' + response.getdetailedmessage()); return; } //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(); if (numrows <= 1) { return; } countryname = response.getdatatable().getvalue(1, 0); // alert("countryname="+countryname); displaycountry(); } </script> </head> <body onload="initialize()"> <table style="width:100%;"> <tr><td colspan="2"><h4>usa states id<div id="dropdown_menu"> </div></h4></td></tr> <tr> <td><div id="map_canvas" style="border-style:solid; border-width:1px; border-color:#333333"></div></td> <td><div id="sidebar" style="width:300px;height:600px; border-style:solid; border-width:1px; border-color:#333333; overflow:auto"></div></td> </tr> <tr><td colspan="2"><span class="style1"><div id="ftquery"></div></td></tr> <tr><td colspan="2"><span class="style1"><div id="ftquery2"></div></td></tr> <tr><td colspan="2"><span class="style1"></td></tr> <tr><td colspan="2"><span class="style1"><div id="ftquery4"></div></td></tr> <tr><td colspan="2"><span class="style1"><div id="ftquery5"></div></td></tr> </table> <div id="country_list"></div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "ua-162157-1"; urchintracker(); </script> </body> </html>
Comments
Post a Comment