Google Address Autocomplete API
In this tutorial we are going see implementation of Google Address Autocomplete API. This Google address autocomplete API provides address autocomplete suggestion based on user search term and location.
Learn jQuery Autocomplete in 3 Minutes
Advantages:
- No need to save address for autocomplete functionality that we have seen in some of our previous tutorial (Invoice System Using jQuery AutoComplete), Google will provide all the addresses.
- Google address autocomplete API much easy
Google Address Autocomplete API
Create index.html file and add basic HTML markup in it.
Create a directory called place in your htdocs or in your server root folder. Now add create following list of folders (css, js ) in the place directory. Then download bootstrap and jQuery files and add in their respective css and js directories. Now create index.html file and include those css and js files in index.html file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Google Address Autocomplete API</title> <!-- Bootstrap --> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,200' rel='stylesheet' type='text/css'> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href="css/style.css" rel="stylesheet"> <!-- Script --> <script src="js/jquery.min.js"></script> <script src="js/script.js"> </script> </head> <body onload="initialize()"> </body> </html>
Design Google Autocomplete Address Form
Here is the Google Autocomplete Address Form HTML markup.
<form class="form-horizontal"> <h2 class="text-center underline">Demo 1</h2> <div class="form-group" style="margin-bottom: 150px;"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <textarea class="form-control" rows="5" id="autocomplete_textarea" ></textarea> </div> </div> <hr/> <h2 class="text-center underline">Demo 2</h2> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label"> </label> <div class="col-sm-10"> <input class="form-control" id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Street address</label> <div class="col-sm-10"> <input class="form-control" id="street_number"></input> <br/> <input class="form-control" id="route"></input> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">City</label> <div class="col-sm-10"> <input class="form-control" id="locality"></input> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">State</label> <div class="col-sm-10"> <input class="form-control" id="administrative_area_level_1"></input> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Country</label> <div class="col-sm-10"> <input class="form-control" id="country"></input> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Zip code</label> <div class="col-sm-10"> <input class="form-control" id="postal_code"></input> </div> </div> </form>
Google Autocomplete Address Javascript/jQuery Script:
Here is the Google Autocomplete Address API Javascript/jQuery Script.
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
var placeSearch, autocomplete, autocomplete_textarea;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
autocomplete_textarea = new google.maps.places.Autocomplete((document.getElementById('autocomplete_textarea')),
{ types: ['geocode'] }
);
google.maps.event.addListener(autocomplete_textarea, 'place_changed', function() {
fillInAddress_textarea();
});
}
function fillInAddress_textarea(){
var place = autocomplete_textarea.getPlace();
console.log( place.formatted_address );
console.log( JSON.stringify(place) );
$('#autocomplete_textarea').val( place.formatted_address );
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
console.log( JSON.stringify(place) );
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
autocomplete_textarea.setBounds(circle.getBounds());
});
}
}
// [END region_geolocation]</body>
</html>
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
