Created
August 30, 2013 17:32
-
-
Save dubrod/6392339 to your computer and use it in GitHub Desktop.
Call the Google Geocoding API with jQuery. Get the formatted address, the LAT & LONG, the County, all the official google map data for an address.
This file contains hidden or 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
<label>Street Address #: <small>123</small></label><br> | |
<input type="text" id="stAddNum"><br> | |
<label>Street Address Name: <small>Elm</small></label><br> | |
<input type="text" id="stAdd"><br> | |
<label>Address Type: <small>St, Ave, Ln, Rd, etc</small></label><br> | |
<input type="text" id="stAddPrefix"><br> | |
<label>City: </label><br> | |
<input type="text" id="city"><br> | |
<label>State: <small>Abbreviation</small></label><br> | |
<input type="text" id="state"><br> | |
<button id="submitAddress">SUBMIT</button> | |
<script> | |
$("#submitAddress").click(function(){ | |
var googleAPI = "http://maps.googleapis.com/maps/api/geocode/json?"; | |
var addressCombined = ""+$("#stAddNum").val()+" "+$("#stAdd").val()+" "+$("#stAddPrefix").val()+" "+$("#city").val()+" "+$("#state").val()+""; | |
console.log(addressCombined); | |
//query the API | |
$.getJSON( googleAPI, { | |
address: addressCombined, | |
sensor: "false" | |
}) | |
.done(function( data ) { | |
console.log(data); | |
//append the FORMATTED ADDRESS | |
$("#response").append( data.results[0].formatted_address ); | |
$("#response").append( data.results[0].geometry.location.lat ); | |
$("#response").append( data.results[0].geometry.location.long ); | |
$("#response").append( data.results[0].address_components[0].short_name ); // street number | |
$("#response").append( data.results[0].address_components[1].short_name ); // route | |
$("#response").append( data.results[0].address_components[2].short_name ); // city | |
$("#response").append( data.results[0].address_components[3].short_name ); // county | |
$("#response").append( data.results[0].address_components[4].short_name ); // state | |
$("#response").append( data.results[0].address_components[5].short_name ); // country | |
$("#response").append( data.results[0].address_components[6].short_name ); // zip | |
}) | |
.fail(function( error ) { | |
console.log("ERROR"); | |
console.log(error); | |
}); | |
}); | |
</script> | |
<div id="response"></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Line 31, should read 'lng' instead of 'long', thanks!