Created
May 3, 2014 17:32
-
-
Save steinbring/d5ce33ad41691a762966 to your computer and use it in GitHub Desktop.
How to use navigator.geolocation.getCurrentPosition(), Google Reverse Geocoding API, the Google Static Maps API, and the Google Street View API to find yourself
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
| <!-- | |
| Joe Steinbring | |
| http://steinbring.net | |
| /////////////////////// | |
| This is part 2. To see the original version, check out https://gist.github.com/steinbring/368a9e693c8c765125df. | |
| --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Find Me!</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| function initiate_geolocation() { | |
| navigator.geolocation.getCurrentPosition(handle_geolocation_query); | |
| } | |
| function DrawGoogleMap(StreetNumber, Street, Locality, State, Size, Zoom){ | |
| // Build the URL for the google map | |
| var mapurl = "http://maps.googleapis.com/maps/api/staticmap?center="+StreetNumber+","+Street+","+Locality+","+State+"&zoom="+Zoom+"&size="+Size+"&sensor=false&markers=color:blue%7Clabel:%7C"+StreetNumber+","+Street+","+Locality+","+State; | |
| // Refresh the image | |
| $("#GoogleImages").append("<img src=\""+mapurl+"\">"); | |
| } | |
| function DrawGoogleImage(StreetNumber, Street, Locality, State, Size){ | |
| // Build the URL for the street view image | |
| var imageurl = "http://maps.googleapis.com/maps/api/streetview?size="+Size+"&location="+StreetNumber+","+Street+","+Locality+","+State+"&sensor=false"; | |
| // Refresh the image | |
| $("#GoogleImages").append("<img src=\""+imageurl+"\">"); | |
| } | |
| function FetchGoogleImages() { | |
| // Clear the div first | |
| $("#GoogleImages").empty(); | |
| DrawGoogleMap($('input[name=StreetNumber]').val(),$('input[name=Street]').val(),$('input[name=Locality]').val(),$('input[name=State]').val(),'300x125',15); | |
| DrawGoogleImage($('input[name=StreetNumber]').val(),$('input[name=Street]').val(),$('input[name=Locality]').val(),$('input[name=State]').val(),'300x125'); | |
| } | |
| function handle_geolocation_query(position){ | |
| $.getJSON("https://maps.googleapis.com/maps/api/geocode/json", | |
| { | |
| // What is your current latitude/longitude? | |
| latlng: position.coords.latitude+","+position.coords.longitude, | |
| // Is there a sensor within the client? | |
| sensor: "false", | |
| // What is the Google API key? | |
| key: "AIzaSyDAiZQ4ykyoXGt4KVjPLXW826k3ffX3KN4" | |
| }, | |
| function(data) { | |
| for (var i=0;i<data.results[0].address_components.length;i++) | |
| { | |
| // Are we looking at the street number? | |
| if(data.results[0].address_components[i].types == "street_number") | |
| $('input[name=StreetNumber]').val(data.results[0].address_components[i].long_name); | |
| // Are we looking at the street? | |
| if(data.results[0].address_components[i].types == "route") | |
| $('input[name=Street]').val(data.results[0].address_components[i].long_name); | |
| // Are we looking at the city/village/town? | |
| if(data.results[0].address_components[i].types[0] == "locality") | |
| $('input[name=Locality]').val(data.results[0].address_components[i].long_name); | |
| // Are we looking at the county? | |
| if(data.results[0].address_components[i].types[0] == "administrative_area_level_2") | |
| $('input[name=County]').val(data.results[0].address_components[i].long_name); | |
| // Are we looking at the state? | |
| if(data.results[0].address_components[i].types[0] == "administrative_area_level_1") | |
| $('input[name=State]').val(data.results[0].address_components[i].long_name); | |
| // Are we looking at the country? | |
| if(data.results[0].address_components[i].types[0] == "country") | |
| $('input[name=Country]').val(data.results[0].address_components[i].long_name); | |
| // Are we looking at the zip code? | |
| if(data.results[0].address_components[i].types[0] == "postal_code") | |
| $('input[name=Zip]').val(data.results[0].address_components[i].long_name); | |
| } | |
| FetchGoogleImages(); | |
| } | |
| ); | |
| } | |
| initiate_geolocation(); | |
| </script> | |
| <style type="text/css"> | |
| label { | |
| display:block; | |
| margin-bottom: 20px; | |
| font-size: 12px; | |
| } | |
| #Form { | |
| overflow:hidden; | |
| } | |
| #Form li { | |
| list-style: none; | |
| } | |
| #Address { | |
| float: left; | |
| width: 30%; | |
| } | |
| #GoogleImages { | |
| float: left; | |
| width: 50%; | |
| } | |
| </style> | |
| <h1>Where am I?</h1> | |
| <div id="Address"> | |
| <form> | |
| <ul id="Form"> | |
| <!-- Street Number --> | |
| <li> | |
| <input type="text" size="6" name="StreetNumber" onchange="FetchGoogleImages();"> | |
| <label for="StreetNumber">Street Number</label> | |
| </li> | |
| <!-- Street --> | |
| <li> | |
| <input type="text" size="15" name="Street" onchange="FetchGoogleImages();"> | |
| <label for="Street">Street</label> | |
| </li> | |
| <!-- Town / Village / City --> | |
| <li> | |
| <input type="text" size="15" name="Locality" onchange="FetchGoogleImages();"> | |
| <label for="Locality">City</label> | |
| </li> | |
| <!-- County --> | |
| <!-- <li> | |
| <input type="text" size="15" name="County"> | |
| <label for="County">County</label> | |
| </li> --> | |
| <!-- State --> | |
| <li> | |
| <input type="text" size="15" name="State" onchange="FetchGoogleImages();"> | |
| <label for="State">State</label> | |
| </li> | |
| <!-- Zip Code --> | |
| <li> | |
| <input type="text" size="5" name="Zip" onchange="FetchGoogleImages();"> | |
| <label for="Zip">Zip</label> | |
| </li> | |
| <!-- Country --> | |
| <!-- <li> | |
| <input type="text" size="15" name="Country"> | |
| <label for="Country">Country</label> | |
| </li> --> | |
| </ul> | |
| </form> | |
| </div> | |
| <div id="GoogleImages"> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment