Created
December 8, 2014 19:03
-
-
Save SiteSelector/314430a0134773058a0d to your computer and use it in GitHub Desktop.
Google Maps JavaScript API v3 Example: Fusion Tables Natural Earth Data Country Browser // source http://jsbin.com/ciwoxa
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>Google Maps JavaScript API v3 Example: Fusion Tables Natural Earth Data Country Browser</title> | |
| <style type="text/css"> | |
| html, body, #map_canvas { | |
| width: 750px; | |
| height: 600px; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .infowindow * {font-size: 90%; margin: 0} | |
| </style> | |
| <!--Load the AJAX API--> | |
| <script type="text/javascript" src="http://www.google.com/jsapi"></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; | |
| var countries = []; | |
| // Fusion Table data ID | |
| var FT_TableID = 420419; | |
| var CountryName = "Israel"; // "United States of America"; | |
| google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']}); | |
| function getCountryNames() { | |
| // set the query using the parameters | |
| var FT_Query_CountryName = "SELECT 'name_0', count() FROM "+FT_TableID+" GROUP by 'name_0' ORDER by 'name_0'"; | |
| 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 the 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 the response object, see the documentation | |
| //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse | |
| numRows = response.getDataTable().getNumberOfRows(); | |
| numCols = response.getDataTable().getNumberOfColumns(); | |
| var countryNames = {}; | |
| for (var i = 0; i < numRows; i++) { | |
| var countryName = response.getDataTable().getValue(i,0); | |
| // var iso = response.getDataTable().getValue(i,1); | |
| // countryName = countryName.substring(0,countryName.indexOf('(')); | |
| countryNames[countryName] = countryName; | |
| // countryNames[countryName].iso = iso; | |
| } | |
| var countryNameDropdown = "<select multiple name='country_select' id='country_select' onchange='handleSelected(this)'>" | |
| countryNameDropdown += '<option selected> - Select a country - <\/option>'; | |
| for (countryName in countryNames) { | |
| countryNameDropdown += "<option value='"+countryName+"'>"+countryName+"</option>" | |
| // document.getElementById('country_list').innerHTML += countryName+"<br>"; | |
| } | |
| countryNameDropdown += "</select>" | |
| document.getElementById('dropdown_menu').innerHTML = countryNameDropdown; | |
| } | |
| // ======= This function handles selections from the select box ==== | |
| function handleSelected(opt) { | |
| checkboxArray = document.getElementById('country_select'); | |
| countries = []; | |
| for (var i = 0; i < checkboxArray.length; i++) { | |
| if (checkboxArray.options[i].selected == true) { | |
| countries.push("'"+checkboxArray[i].value+"'"); | |
| } | |
| } | |
| DisplayCountry(); | |
| } | |
| function DisplayCountry() { | |
| var CountriesQuery = countries.join(","); | |
| FT_Query = "SELECT 'kml_4326' FROM "+FT_TableID+" WHERE 'name_0' IN("+CountriesQuery+");"; | |
| gpolygons = []; | |
| layer.setQuery(FT_Query); | |
| if (!layer.getMap()) layer.setMap(map); | |
| 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 the initial center, zoom and maptype for the map | |
| // if it is not specified in the query string | |
| var lat = 37.422104808; | |
| var lng = 0.0; | |
| var zoom = 2; | |
| var maptype = google.maps.MapTypeId.ROADMAP; | |
| infoWindow = new google.maps.InfoWindow(); | |
| //define callback function, this is called when the results are 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 the response object, see the 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 the results into a string, you can build a table here | |
| fusiontabledata = "<table><tr>"; | |
| // for(i = 0; i < 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();'>show all</a></td></tr>"; | |
| for(i = 0; i < 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 the results on the 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 myFTclick(row) { | |
| var description = FTresponse.getDataTable().getValue(row,0); | |
| var name = FTresponse.getDataTable().getValue(row,1); | |
| loadRow(row); | |
| var position = gpolygons[row].position; | |
| // Set up and create the 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() { | |
| // If there are any parameters at eh end of the URL, they will be in location.search | |
| // looking something like "?marker=3" | |
| // skip the first character, we are not interested in the "?" | |
| var query = location.search.substring(1); | |
| // split the rest at each "&" character to give a list of "argname=value" pairs | |
| var pairs = query.split("&"); | |
| for (var i=0; i<pairs.length; i++) { | |
| // break each pair at the first "=" to obtain the argname and 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);} | |
| if (argname == "countries") { | |
| var countriesStr = unescape(value); | |
| var countriesArray = countriesStr.split(","); | |
| countries = []; | |
| for (var j=0; j<countriesArray.length; j++) { | |
| countries.push("'"+countriesArray[j]+"'"); | |
| } | |
| // alert("1:"+countries.length); | |
| } | |
| value = pairs[i].substring(pos+1).toLowerCase(); | |
| // process each possible argname - use unescape() if theres any 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") { | |
| // from the v3 documentation 8/24/2010 | |
| // HYBRID This map type displays a transparent layer of major streets on satellite images. | |
| // ROADMAP This map type displays a normal street map. | |
| // SATELLITE This map type displays satellite images. | |
| // TERRAIN This map type displays maps with physical features such as terrain and 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); | |
| } | |
| 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 'name_0' FROM "+FT_TableID+" WHERE ST_INTERSECTS('kml_4326',CIRCLE(LATLNG"+event.latLng+", 1));"; | |
| // alert(event.latLng+"query="+FT_click_query); | |
| // set the query using the 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 the callback function | |
| query.send(getCountryFromClick); | |
| }); | |
| geocoder = new google.maps.Geocoder(); | |
| var FT_Query = "SELECT 'kml_4326' FROM "+FT_TableID+" WHERE 'name_0' = '"+CountryName+"';"; | |
| var FT_Options = { suppressInfoWindows: true, query:FT_Query }; | |
| document.getElementById("FTquery").innerHTML = FT_Query; | |
| layer = new google.maps.FusionTablesLayer(FT_TableID, FT_Options); | |
| layer.setMap(map); | |
| // alert("2:"+countries.length); | |
| google.maps.event.addListener(layer, "click", function(event) { | |
| infoWindow.close(); | |
| infoWindow.setContent(infoWindowContent(event.row.name_1.value,event.row.name_0.value)); | |
| infoWindow.setPosition(event.latLng); | |
| infoWindow.open(map); | |
| }); | |
| getCountryNames(); | |
| // alert("3:"+countries.length); | |
| if (countries.length > 0) DisplayCountry(); | |
| } | |
| 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 the response object, see the 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"><h3>Google Maps JavaScript API v3 Example: Fusion Tables Natural Earth Data Country Browser</h3></td></tr> | |
| <tr><td colspan="2"> | |
| <div id="dropdown_menu"> | |
| <select multiple name="country_select" id="country_select" onchange="handleSelected(this)"><option selected="selected"> - Select a country - </option> | |
| <option value="Afghanistan">Afghanistan</option> | |
| <option value="Albania">Albania</option> | |
| <option value="Algeria">Algeria</option> | |
| <option value="Angola">Angola</option> | |
| <option value="Argentina">Argentina</option> | |
| <option value="Armenia">Armenia</option> | |
| <option value="Australia">Australia</option> | |
| <option value="Austria">Austria</option> | |
| <option value="Azerbaijan">Azerbaijan</option> | |
| <option value="Baikonur Cosmodrome">Baikonur Cosmodrome</option> | |
| <option value="Bangladesh">Bangladesh</option> | |
| <option value="Barbados">Barbados</option> | |
| <option value="Belarus">Belarus</option> | |
| <option value="Belgium">Belgium</option> | |
| <option value="Belize">Belize</option> | |
| <option value="Benin">Benin</option> | |
| <option value="Bhutan">Bhutan</option> | |
| <option value="Bolivia">Bolivia</option> | |
| <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option> | |
| <option value="Botswana">Botswana</option> | |
| <option value="Brazil">Brazil</option> | |
| <option value="Brunei">Brunei</option> | |
| <option value="Bulgaria">Bulgaria</option> | |
| <option value="Burkina Faso">Burkina Faso</option> | |
| <option value="Burundi">Burundi</option> | |
| <option value="Cambodia">Cambodia</option> | |
| <option value="Cameroon">Cameroon</option> | |
| <option value="Canada">Canada</option> | |
| <option value="Central African Republic">Central African Republic</option> | |
| <option value="Chad">Chad</option> | |
| <option value="Chile">Chile</option> | |
| <option value="China">China</option> | |
| <option value="Colombia">Colombia</option> | |
| <option value="Congo (Brazzaville)">Congo (Brazzaville)</option> | |
| <option value="Congo (Kinshasa)">Congo (Kinshasa)</option> | |
| <option value="Costa Rica">Costa Rica</option> | |
| <option value="Croatia">Croatia</option> | |
| <option value="Cuba">Cuba</option> | |
| <option value="Cyprus">Cyprus</option> | |
| <option value="Czech Republic">Czech Republic</option> | |
| <option value="Denmark">Denmark</option> | |
| <option value="Djibouti">Djibouti</option> | |
| <option value="Dominica">Dominica</option> | |
| <option value="Dominican Republic">Dominican Republic</option> | |
| <option value="East Timor">East Timor</option> | |
| <option value="Ecuador">Ecuador</option> | |
| <option value="Egypt">Egypt</option> | |
| <option value="El Salvador">El Salvador</option> | |
| <option value="Equatorial Guinea">Equatorial Guinea</option> | |
| <option value="Eritrea">Eritrea</option> | |
| <option value="Estonia">Estonia</option> | |
| <option value="Ethiopia">Ethiopia</option> | |
| <option value="Fiji">Fiji</option> | |
| <option value="Finland">Finland</option> | |
| <option value="France">France</option> | |
| <option value="Gabon">Gabon</option> | |
| <option value="Gambia, The">Gambia, The</option> | |
| <option value="Georgia">Georgia</option> | |
| <option value="Germany">Germany</option> | |
| <option value="Ghana">Ghana</option> | |
| <option value="Greece">Greece</option> | |
| <option value="Greenland">Greenland</option> | |
| <option value="Guatemala">Guatemala</option> | |
| <option value="Guinea">Guinea</option> | |
| <option value="Guinea Bissau">Guinea Bissau</option> | |
| <option value="Guyana">Guyana</option> | |
| <option value="Haiti">Haiti</option> | |
| <option value="Honduras">Honduras</option> | |
| <option value="Hungary">Hungary</option> | |
| <option value="Iceland">Iceland</option> | |
| <option value="India">India</option> | |
| <option value="Indonesia">Indonesia</option> | |
| <option value="Iran">Iran</option> | |
| <option value="Iraq">Iraq</option> | |
| <option value="Ireland">Ireland</option> | |
| <option value="Israel">Israel</option> | |
| <option value="Italy">Italy</option> | |
| <option value="Ivory Coast">Ivory Coast</option> | |
| <option value="Jamaica">Jamaica</option> | |
| <option value="Japan">Japan</option> | |
| <option value="Jordan">Jordan</option> | |
| <option value="Kazakhstan">Kazakhstan</option> | |
| <option value="Kenya">Kenya</option> | |
| <option value="Korea, North">Korea, North</option> | |
| <option value="Korea, South">Korea, South</option> | |
| <option value="Kosovo">Kosovo</option> | |
| <option value="Kuwait">Kuwait</option> | |
| <option value="Kyrgyzstan">Kyrgyzstan</option> | |
| <option value="Laos">Laos</option> | |
| <option value="Latvia">Latvia</option> | |
| <option value="Lebanon">Lebanon</option> | |
| <option value="Lesotho">Lesotho</option> | |
| <option value="Liberia">Liberia</option> | |
| <option value="Libya">Libya</option> | |
| <option value="Lithuania">Lithuania</option> | |
| <option value="Luxembourg">Luxembourg</option> | |
| <option value="Macedonia">Macedonia</option> | |
| <option value="Madagascar">Madagascar</option> | |
| <option value="Malawi">Malawi</option> | |
| <option value="Malaysia">Malaysia</option> | |
| <option value="Mali">Mali</option> | |
| <option value="Mauritania">Mauritania</option> | |
| <option value="Mexico">Mexico</option> | |
| <option value="Moldova">Moldova</option> | |
| <option value="Mongolia">Mongolia</option> | |
| <option value="Montenegro">Montenegro</option> | |
| <option value="Morocco">Morocco</option> | |
| <option value="Mozambique">Mozambique</option> | |
| <option value="Myanmar">Myanmar</option> | |
| <option value="Namibia">Namibia</option> | |
| <option value="Nepal">Nepal</option> | |
| <option value="Netherlands">Netherlands</option> | |
| <option value="New Caledonia">New Caledonia</option> | |
| <option value="New Zealand">New Zealand</option> | |
| <option value="Nicaragua">Nicaragua</option> | |
| <option value="Niger">Niger</option> | |
| <option value="Nigeria">Nigeria</option> | |
| <option value="Norway">Norway</option> | |
| <option value="Oman">Oman</option> | |
| <option value="Pakistan">Pakistan</option> | |
| <option value="Panama">Panama</option> | |
| <option value="Papua New Guinea">Papua New Guinea</option> | |
| <option value="Paraguay">Paraguay</option> | |
| <option value="Peru">Peru</option> | |
| <option value="Philippines">Philippines</option> | |
| <option value="Poland">Poland</option> | |
| <option value="Portugal">Portugal</option> | |
| <option value="Qatar">Qatar</option> | |
| <option value="Romania">Romania</option> | |
| <option value="Russia">Russia</option> | |
| <option value="Rwanda">Rwanda</option> | |
| <option value="Saudi Arabia">Saudi Arabia</option> | |
| <option value="Senegal">Senegal</option> | |
| <option value="Serbia">Serbia</option> | |
| <option value="Sierra Leone">Sierra Leone</option> | |
| <option value="Slovakia">Slovakia</option> | |
| <option value="Slovenia">Slovenia</option> | |
| <option value="Solomon Islands">Solomon Islands</option> | |
| <option value="Somalia">Somalia</option> | |
| <option value="South Africa">South Africa</option> | |
| <option value="Spain">Spain</option> | |
| <option value="Sri Lanka">Sri Lanka</option> | |
| <option value="Sudan">Sudan</option> | |
| <option value="Suriname">Suriname</option> | |
| <option value="Swaziland">Swaziland</option> | |
| <option value="Sweden">Sweden</option> | |
| <option value="Switzerland">Switzerland</option> | |
| <option value="Syria">Syria</option> | |
| <option value="Taiwan">Taiwan</option> | |
| <option value="Tajikistan">Tajikistan</option> | |
| <option value="Tanzania">Tanzania</option> | |
| <option value="Thailand">Thailand</option> | |
| <option value="Togo">Togo</option> | |
| <option value="Trinidad and Tobago">Trinidad and Tobago</option> | |
| <option value="Tunisia">Tunisia</option> | |
| <option value="Turkey">Turkey</option> | |
| <option value="Turkmenistan">Turkmenistan</option> | |
| <option value="Uganda">Uganda</option> | |
| <option value="Ukraine">Ukraine</option> | |
| <option value="United Arab Emirates">United Arab Emirates</option> | |
| <option value="United Kingdom">United Kingdom</option> | |
| <option value="United States of America">United States of America</option> | |
| <option value="Uruguay">Uruguay</option> | |
| <option value="Uzbekistan">Uzbekistan</option> | |
| <option value="Vanuatu">Vanuatu</option> | |
| <option value="Venezuela">Venezuela</option> | |
| <option value="Vietnam">Vietnam</option> | |
| <option value="Yemen">Yemen</option> | |
| <option value="Zambia">Zambia</option> | |
| <option value="Zimbabwe">Zimbabwe</option> | |
| </select> | |
| </div> | |
| <input type="button" onclick="handleSelected();" value="show countries"></input> | |
| </td></tr> | |
| <tr> | |
| <td><div id="map_canvas"></div></td> | |
| <td><div id="sidebar" style="width:300px;height:600px; overflow:auto"></div></td> | |
| </tr> | |
| <tr><td colspan="2"><div id="FTquery"></div></td></tr> | |
| <tr><td colspan="2"><div id="FTquery2"></div></td></tr> | |
| <tr><td colspan="2"><div id="FTquery3"></div></td></tr> | |
| <tr><td colspan="2"><div id="FTquery4"></div></td></tr> | |
| <tr><td colspan="2"><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> | |
| <script id="jsbin-source-html" type="text/html"><!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>Google Maps JavaScript API v3 Example: Fusion Tables Natural Earth Data Country Browser</title> | |
| <style type="text/css"> | |
| html, body, #map_canvas { | |
| width: 750px; | |
| height: 600px; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .infowindow * {font-size: 90%; margin: 0} | |
| </style> | |
| <\!--Load the AJAX API--> | |
| <script type="text/javascript" src="http://www.google.com/jsapi"><\/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; | |
| var countries = []; | |
| // Fusion Table data ID | |
| var FT_TableID = 420419; | |
| var CountryName = "Israel"; // "United States of America"; | |
| google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']}); | |
| function getCountryNames() { | |
| // set the query using the parameters | |
| var FT_Query_CountryName = "SELECT 'name_0', count() FROM "+FT_TableID+" GROUP by 'name_0' ORDER by 'name_0'"; | |
| 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 the 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 the response object, see the documentation | |
| //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse | |
| numRows = response.getDataTable().getNumberOfRows(); | |
| numCols = response.getDataTable().getNumberOfColumns(); | |
| var countryNames = {}; | |
| for (var i = 0; i < numRows; i++) { | |
| var countryName = response.getDataTable().getValue(i,0); | |
| // var iso = response.getDataTable().getValue(i,1); | |
| // countryName = countryName.substring(0,countryName.indexOf('(')); | |
| countryNames[countryName] = countryName; | |
| // countryNames[countryName].iso = iso; | |
| } | |
| var countryNameDropdown = "<select multiple name='country_select' id='country_select' onchange='handleSelected(this)'>" | |
| countryNameDropdown += '<option selected> - Select a country - <\/option>'; | |
| for (countryName in countryNames) { | |
| countryNameDropdown += "<option value='"+countryName+"'>"+countryName+"</option>" | |
| // document.getElementById('country_list').innerHTML += countryName+"<br>"; | |
| } | |
| countryNameDropdown += "</select>" | |
| document.getElementById('dropdown_menu').innerHTML = countryNameDropdown; | |
| } | |
| // ======= This function handles selections from the select box ==== | |
| function handleSelected(opt) { | |
| checkboxArray = document.getElementById('country_select'); | |
| countries = []; | |
| for (var i = 0; i < checkboxArray.length; i++) { | |
| if (checkboxArray.options[i].selected == true) { | |
| countries.push("'"+checkboxArray[i].value+"'"); | |
| } | |
| } | |
| DisplayCountry(); | |
| } | |
| function DisplayCountry() { | |
| var CountriesQuery = countries.join(","); | |
| FT_Query = "SELECT 'kml_4326' FROM "+FT_TableID+" WHERE 'name_0' IN("+CountriesQuery+");"; | |
| gpolygons = []; | |
| layer.setQuery(FT_Query); | |
| if (!layer.getMap()) layer.setMap(map); | |
| 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 the initial center, zoom and maptype for the map | |
| // if it is not specified in the query string | |
| var lat = 37.422104808; | |
| var lng = 0.0; | |
| var zoom = 2; | |
| var maptype = google.maps.MapTypeId.ROADMAP; | |
| infoWindow = new google.maps.InfoWindow(); | |
| //define callback function, this is called when the results are 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 the response object, see the 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 the results into a string, you can build a table here | |
| fusiontabledata = "<table><tr>"; | |
| // for(i = 0; i < 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();'>show all</a></td></tr>"; | |
| for(i = 0; i < 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 the results on the 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 myFTclick(row) { | |
| var description = FTresponse.getDataTable().getValue(row,0); | |
| var name = FTresponse.getDataTable().getValue(row,1); | |
| loadRow(row); | |
| var position = gpolygons[row].position; | |
| // Set up and create the 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() { | |
| // If there are any parameters at eh end of the URL, they will be in location.search | |
| // looking something like "?marker=3" | |
| // skip the first character, we are not interested in the "?" | |
| var query = location.search.substring(1); | |
| // split the rest at each "&" character to give a list of "argname=value" pairs | |
| var pairs = query.split("&"); | |
| for (var i=0; i<pairs.length; i++) { | |
| // break each pair at the first "=" to obtain the argname and 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);} | |
| if (argname == "countries") { | |
| var countriesStr = unescape(value); | |
| var countriesArray = countriesStr.split(","); | |
| countries = []; | |
| for (var j=0; j<countriesArray.length; j++) { | |
| countries.push("'"+countriesArray[j]+"'"); | |
| } | |
| // alert("1:"+countries.length); | |
| } | |
| value = pairs[i].substring(pos+1).toLowerCase(); | |
| // process each possible argname - use unescape() if theres any 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") { | |
| // from the v3 documentation 8/24/2010 | |
| // HYBRID This map type displays a transparent layer of major streets on satellite images. | |
| // ROADMAP This map type displays a normal street map. | |
| // SATELLITE This map type displays satellite images. | |
| // TERRAIN This map type displays maps with physical features such as terrain and 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); | |
| } | |
| 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 'name_0' FROM "+FT_TableID+" WHERE ST_INTERSECTS('kml_4326',CIRCLE(LATLNG"+event.latLng+", 1));"; | |
| // alert(event.latLng+"query="+FT_click_query); | |
| // set the query using the 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 the callback function | |
| query.send(getCountryFromClick); | |
| }); | |
| geocoder = new google.maps.Geocoder(); | |
| var FT_Query = "SELECT 'kml_4326' FROM "+FT_TableID+" WHERE 'name_0' = '"+CountryName+"';"; | |
| var FT_Options = { suppressInfoWindows: true, query:FT_Query }; | |
| document.getElementById("FTquery").innerHTML = FT_Query; | |
| layer = new google.maps.FusionTablesLayer(FT_TableID, FT_Options); | |
| layer.setMap(map); | |
| // alert("2:"+countries.length); | |
| google.maps.event.addListener(layer, "click", function(event) { | |
| infoWindow.close(); | |
| infoWindow.setContent(infoWindowContent(event.row.name_1.value,event.row.name_0.value)); | |
| infoWindow.setPosition(event.latLng); | |
| infoWindow.open(map); | |
| }); | |
| getCountryNames(); | |
| // alert("3:"+countries.length); | |
| if (countries.length > 0) DisplayCountry(); | |
| } | |
| 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 the response object, see the 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"><h3>Google Maps JavaScript API v3 Example: Fusion Tables Natural Earth Data Country Browser</h3></td></tr> | |
| <tr><td colspan="2"> | |
| <div id="dropdown_menu"> | |
| <select multiple name="country_select" id="country_select" onchange="handleSelected(this)"><option selected="selected"> - Select a country - </option> | |
| <option value="Afghanistan">Afghanistan</option> | |
| <option value="Albania">Albania</option> | |
| <option value="Algeria">Algeria</option> | |
| <option value="Angola">Angola</option> | |
| <option value="Argentina">Argentina</option> | |
| <option value="Armenia">Armenia</option> | |
| <option value="Australia">Australia</option> | |
| <option value="Austria">Austria</option> | |
| <option value="Azerbaijan">Azerbaijan</option> | |
| <option value="Baikonur Cosmodrome">Baikonur Cosmodrome</option> | |
| <option value="Bangladesh">Bangladesh</option> | |
| <option value="Barbados">Barbados</option> | |
| <option value="Belarus">Belarus</option> | |
| <option value="Belgium">Belgium</option> | |
| <option value="Belize">Belize</option> | |
| <option value="Benin">Benin</option> | |
| <option value="Bhutan">Bhutan</option> | |
| <option value="Bolivia">Bolivia</option> | |
| <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option> | |
| <option value="Botswana">Botswana</option> | |
| <option value="Brazil">Brazil</option> | |
| <option value="Brunei">Brunei</option> | |
| <option value="Bulgaria">Bulgaria</option> | |
| <option value="Burkina Faso">Burkina Faso</option> | |
| <option value="Burundi">Burundi</option> | |
| <option value="Cambodia">Cambodia</option> | |
| <option value="Cameroon">Cameroon</option> | |
| <option value="Canada">Canada</option> | |
| <option value="Central African Republic">Central African Republic</option> | |
| <option value="Chad">Chad</option> | |
| <option value="Chile">Chile</option> | |
| <option value="China">China</option> | |
| <option value="Colombia">Colombia</option> | |
| <option value="Congo (Brazzaville)">Congo (Brazzaville)</option> | |
| <option value="Congo (Kinshasa)">Congo (Kinshasa)</option> | |
| <option value="Costa Rica">Costa Rica</option> | |
| <option value="Croatia">Croatia</option> | |
| <option value="Cuba">Cuba</option> | |
| <option value="Cyprus">Cyprus</option> | |
| <option value="Czech Republic">Czech Republic</option> | |
| <option value="Denmark">Denmark</option> | |
| <option value="Djibouti">Djibouti</option> | |
| <option value="Dominica">Dominica</option> | |
| <option value="Dominican Republic">Dominican Republic</option> | |
| <option value="East Timor">East Timor</option> | |
| <option value="Ecuador">Ecuador</option> | |
| <option value="Egypt">Egypt</option> | |
| <option value="El Salvador">El Salvador</option> | |
| <option value="Equatorial Guinea">Equatorial Guinea</option> | |
| <option value="Eritrea">Eritrea</option> | |
| <option value="Estonia">Estonia</option> | |
| <option value="Ethiopia">Ethiopia</option> | |
| <option value="Fiji">Fiji</option> | |
| <option value="Finland">Finland</option> | |
| <option value="France">France</option> | |
| <option value="Gabon">Gabon</option> | |
| <option value="Gambia, The">Gambia, The</option> | |
| <option value="Georgia">Georgia</option> | |
| <option value="Germany">Germany</option> | |
| <option value="Ghana">Ghana</option> | |
| <option value="Greece">Greece</option> | |
| <option value="Greenland">Greenland</option> | |
| <option value="Guatemala">Guatemala</option> | |
| <option value="Guinea">Guinea</option> | |
| <option value="Guinea Bissau">Guinea Bissau</option> | |
| <option value="Guyana">Guyana</option> | |
| <option value="Haiti">Haiti</option> | |
| <option value="Honduras">Honduras</option> | |
| <option value="Hungary">Hungary</option> | |
| <option value="Iceland">Iceland</option> | |
| <option value="India">India</option> | |
| <option value="Indonesia">Indonesia</option> | |
| <option value="Iran">Iran</option> | |
| <option value="Iraq">Iraq</option> | |
| <option value="Ireland">Ireland</option> | |
| <option value="Israel">Israel</option> | |
| <option value="Italy">Italy</option> | |
| <option value="Ivory Coast">Ivory Coast</option> | |
| <option value="Jamaica">Jamaica</option> | |
| <option value="Japan">Japan</option> | |
| <option value="Jordan">Jordan</option> | |
| <option value="Kazakhstan">Kazakhstan</option> | |
| <option value="Kenya">Kenya</option> | |
| <option value="Korea, North">Korea, North</option> | |
| <option value="Korea, South">Korea, South</option> | |
| <option value="Kosovo">Kosovo</option> | |
| <option value="Kuwait">Kuwait</option> | |
| <option value="Kyrgyzstan">Kyrgyzstan</option> | |
| <option value="Laos">Laos</option> | |
| <option value="Latvia">Latvia</option> | |
| <option value="Lebanon">Lebanon</option> | |
| <option value="Lesotho">Lesotho</option> | |
| <option value="Liberia">Liberia</option> | |
| <option value="Libya">Libya</option> | |
| <option value="Lithuania">Lithuania</option> | |
| <option value="Luxembourg">Luxembourg</option> | |
| <option value="Macedonia">Macedonia</option> | |
| <option value="Madagascar">Madagascar</option> | |
| <option value="Malawi">Malawi</option> | |
| <option value="Malaysia">Malaysia</option> | |
| <option value="Mali">Mali</option> | |
| <option value="Mauritania">Mauritania</option> | |
| <option value="Mexico">Mexico</option> | |
| <option value="Moldova">Moldova</option> | |
| <option value="Mongolia">Mongolia</option> | |
| <option value="Montenegro">Montenegro</option> | |
| <option value="Morocco">Morocco</option> | |
| <option value="Mozambique">Mozambique</option> | |
| <option value="Myanmar">Myanmar</option> | |
| <option value="Namibia">Namibia</option> | |
| <option value="Nepal">Nepal</option> | |
| <option value="Netherlands">Netherlands</option> | |
| <option value="New Caledonia">New Caledonia</option> | |
| <option value="New Zealand">New Zealand</option> | |
| <option value="Nicaragua">Nicaragua</option> | |
| <option value="Niger">Niger</option> | |
| <option value="Nigeria">Nigeria</option> | |
| <option value="Norway">Norway</option> | |
| <option value="Oman">Oman</option> | |
| <option value="Pakistan">Pakistan</option> | |
| <option value="Panama">Panama</option> | |
| <option value="Papua New Guinea">Papua New Guinea</option> | |
| <option value="Paraguay">Paraguay</option> | |
| <option value="Peru">Peru</option> | |
| <option value="Philippines">Philippines</option> | |
| <option value="Poland">Poland</option> | |
| <option value="Portugal">Portugal</option> | |
| <option value="Qatar">Qatar</option> | |
| <option value="Romania">Romania</option> | |
| <option value="Russia">Russia</option> | |
| <option value="Rwanda">Rwanda</option> | |
| <option value="Saudi Arabia">Saudi Arabia</option> | |
| <option value="Senegal">Senegal</option> | |
| <option value="Serbia">Serbia</option> | |
| <option value="Sierra Leone">Sierra Leone</option> | |
| <option value="Slovakia">Slovakia</option> | |
| <option value="Slovenia">Slovenia</option> | |
| <option value="Solomon Islands">Solomon Islands</option> | |
| <option value="Somalia">Somalia</option> | |
| <option value="South Africa">South Africa</option> | |
| <option value="Spain">Spain</option> | |
| <option value="Sri Lanka">Sri Lanka</option> | |
| <option value="Sudan">Sudan</option> | |
| <option value="Suriname">Suriname</option> | |
| <option value="Swaziland">Swaziland</option> | |
| <option value="Sweden">Sweden</option> | |
| <option value="Switzerland">Switzerland</option> | |
| <option value="Syria">Syria</option> | |
| <option value="Taiwan">Taiwan</option> | |
| <option value="Tajikistan">Tajikistan</option> | |
| <option value="Tanzania">Tanzania</option> | |
| <option value="Thailand">Thailand</option> | |
| <option value="Togo">Togo</option> | |
| <option value="Trinidad and Tobago">Trinidad and Tobago</option> | |
| <option value="Tunisia">Tunisia</option> | |
| <option value="Turkey">Turkey</option> | |
| <option value="Turkmenistan">Turkmenistan</option> | |
| <option value="Uganda">Uganda</option> | |
| <option value="Ukraine">Ukraine</option> | |
| <option value="United Arab Emirates">United Arab Emirates</option> | |
| <option value="United Kingdom">United Kingdom</option> | |
| <option value="United States of America">United States of America</option> | |
| <option value="Uruguay">Uruguay</option> | |
| <option value="Uzbekistan">Uzbekistan</option> | |
| <option value="Vanuatu">Vanuatu</option> | |
| <option value="Venezuela">Venezuela</option> | |
| <option value="Vietnam">Vietnam</option> | |
| <option value="Yemen">Yemen</option> | |
| <option value="Zambia">Zambia</option> | |
| <option value="Zimbabwe">Zimbabwe</option> | |
| </select> | |
| </div> | |
| <input type="button" onclick="handleSelected();" value="show countries"></input> | |
| </td></tr> | |
| <tr> | |
| <td><div id="map_canvas"></div></td> | |
| <td><div id="sidebar" style="width:300px;height:600px; overflow:auto"></div></td> | |
| </tr> | |
| <tr><td colspan="2"><div id="FTquery"></div></td></tr> | |
| <tr><td colspan="2"><div id="FTquery2"></div></td></tr> | |
| <tr><td colspan="2"><div id="FTquery3"></div></td></tr> | |
| <tr><td colspan="2"><div id="FTquery4"></div></td></tr> | |
| <tr><td colspan="2"><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> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment