Skip to content

Instantly share code, notes, and snippets.

@dubrod
Created August 30, 2013 17:32
Show Gist options
  • Select an option

  • Save dubrod/6392339 to your computer and use it in GitHub Desktop.

Select an option

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
Copy Markdown

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