Created
April 30, 2014 03:34
-
-
Save steinbring/368a9e693c8c765125df to your computer and use it in GitHub Desktop.
How to use navigator.geolocation.getCurrentPosition() and the Google Reverse Geocoding API to prepopulate an address form
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> | |
| <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 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); | |
| } | |
| } | |
| ); | |
| } | |
| initiate_geolocation(); | |
| </script> | |
| <h1>Where am I?</h1> | |
| <form> | |
| <!-- Street Number --> | |
| <p> | |
| <label for="StreetNumber">Street Number</label> | |
| <input type="text" size="6" name="StreetNumber"> | |
| </p> | |
| <!-- Street --> | |
| <p> | |
| <label for="Street">Street</label> | |
| <input type="text" size="15" name="Street"> | |
| </p> | |
| <!-- Town / Village / City --> | |
| <p> | |
| <label for="Locality">Locality</label> | |
| <input type="text" size="15" name="Locality"> | |
| </p> | |
| <!-- County --> | |
| <p> | |
| <label for="County">County</label> | |
| <input type="text" size="15" name="County"> | |
| </p> | |
| <!-- State --> | |
| <p> | |
| <label for="State">State</label> | |
| <input type="text" size="15" name="State"> | |
| </p> | |
| <!-- Zip Code --> | |
| <p> | |
| <label for="Zip">Zip</label> | |
| <input type="text" size="5" name="Zip"> | |
| </p> | |
| <!-- Country --> | |
| <p> | |
| <label for="Country">Country</label> | |
| <input type="text" size="15" name="Country"> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment