Autofill Address + Google Maps API
I want to present my users with a text box wherein they can type in their address. As they type their address, I want to provide the users with suggestions/predictions of what address they are trying to type. I'm also concerned about the relevance of this address (e.g. that the address is not an address halfway across the world).
Is this possible? I'm using jQuery.
Answer
You can use Google Places API to have an autocomplete for address. When address is selected, address_components field contains structured address data (e.g. street, city, country) and could be easily converted into separate fields.
Here is a short working demo:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="address" style="width: 500px;"></input>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
</body>
</html>