Skip to content

Instantly share code, notes, and snippets.

@dubrod
Created August 30, 2013 17:32
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dubrod/6392339 to your computer and use it in GitHub Desktop.
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.
<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>
@alexisquesney
Copy link

Line 31, should read 'lng' instead of 'long', thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment