I'd like to add a feature to my website where a customer can enter their postcode, and it automtaically looks up their address with either Google Geocoding or an opensource / Bing equivalent.
Has anybody got any sample code or know a good guide where I can do this?
If it's done using jQuery even better :)
Many thanks in advance
Darren
Using jQuery's getJSON and google's API - http://codepen.io/seanjacob/pen/wfcHB
$('#submit').click(function(){
//Get Postcode
var number = $('#number').val();
var postcode = $('#postcode').val().toUpperCase();;
//Get latitude & longitude
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + postcode + '&key=[[YOUR_API_KEY]]', function(data) {
var lat = data.results[0].geometry.location.lat;
var lng = data.results[0].geometry.location.lng;
//Get address
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' + lng + '&key=[[YOUR_API_KEY]]', function(data) {
var address = data.results[0].address_components;
var street = address[1].long_name;
var town = address[2].long_name;
var county = address[3].long_name;
//Insert
$('#text').text(number + ', ' + street + ', ' + town + ', ' + county + ', ' + postcode);
});
});
});
Unless you're using Google Maps API for Business, you're limited to 2,500 geolocation requests per day. Since this script is making two requests per run, that’s 1,250 postcode look ups a day.
I'm actually working on a Google Maps application that uses GeoCoding right now... It's my first, so I've been relying heavily on the Google Maps API. Here's the links to help you get started:
http://code.google.com/apis/maps/documentation/javascript/basics.html - A basic starting point for the API in general.
Look in the left column for the Tutorial, Geocoding (or follow the geocoding link half-way through the tutorial), and code samples.
All of these got me where I needed to get started.
Good Luck!
Lelando
Thank you seanjacob for your answer which got me to delve a little deeper. The results returned in address_components are not always the same types, i.e. index 1 does not always hold the street name, so it is best to check the value returned in address_components[n].types[0] to determine the type of address field it contains.
Please also note that you should now make the call to Google's API using https and you will need to specify your API Key.
Here is the script:
function getAddress() {
//Get Postcode
var number = $('#HouseNumber').val();
var postcode = $('#PostCode').val().toUpperCase();;
var address_1 = '';
var address_2 = '';
var town = '';
var county = '';
var pcode = '';
var region = '';
var country = '';
//Get Address
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + postcode + '&sensor=false&key=[YOUR API KEY IN HERE]', function (data) {
// Format/Find Address Fields
var address = data.results[0].address_components;
// Loop through each of the address components to set the correct address field
$.each(address, function () {
var address_type = this.types[0];
switch (address_type) {
case 'route':
address_1 = number + ' ' + this.long_name;
break;
case 'locality':
address_2 = this.long_name;
break;
case 'postal_town':
town = this.long_name;
break;
case 'administrative_area_level_2':
county = this.long_name;
break;
case 'administrative_area_level_1':
region = this.long_name;
break;
case 'country':
country = this.long_name;
break;
}
});
// Sometimes the county is set to the postal town so set to empty if that is the case
if (county === town) {
county = '';
}
// Display the results
$('#address_1').text(address_1);
$('#address_2').text(address_2);
$('#town').text(town);
$('#county').text(county);
$('#postcode').text(postcode);
$('#region').text(region);
$('#country').text(country);
});
}
And here is the page calling the function
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-2 control-label"><label for="HouseNumber">House No.</label></div>
<div class="col-md-10">
<input type="text" id="HouseNumber" name="HouseNumber" />
</div>
</div>
<div class="form-group">
<div class="col-md-2 control-label"><label for="PostCode">Post Code</label></div>
<div class="col-md-10">
<input type="text" id="PostCode" name="PostCode" />
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4 acc-centre"> </div>
<div class="col-md-4 acc-centre"><input type="button" class="btn btn-primary btn-lg" value="Lookup" onclick="getAddress()"></div>
<div class="col-md-4 acc-centre"> </div>
</div>
<div class="row">
<div class="col-md-12 acc-centre">
<span id="address_1"></span><br />
<span id="address_2"></span><br />
<span id="town"></span><br />
<span id="county"></span><br />
<span id="postcode"></span><br />
<span id="region"></span><br />
<span id="country"></span><br />
</div>
</div>
</div>
