Google Address Autocomplete Implementation through JS
This blog post quickly explains you how you can implement google address autocomplete on any form using mere JavaScript. You will need to generate the API key from google cloud console and enable the Places API. In addition to activate the API key you will need to add the billing details to your cloud console. Here is the link that explains how you can generate the Google’s Places API key.
Now let’s look into the code that you need on your end.
First of all let’s look into the HTML part. Below shown is a simple form with a text field where we will implement the Google address autocomplete.
<!DOCTYPE html> <html> <head> <title>Google Autocomplete Implementation</title> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <input type="text" id="searchAddressList"> <input type="text" id="country"> <input type="text" id="zip"> <input type="text" id="province"> <input type="text" id="city"> <input type="text" id="address"> </body> </html>
Above HTML have a very few basic elements. On Head, I have added a script that needs to be included for google autocomplete to work. You need to replace “YOUR_API_KEY” with the API key that you generated from google cloud console.
Next script is for jQuery, that is the optional script, which is not necessary but in my current example I will use jQuery to get the address and fill the address fields.
Inside the body there is one input field “searchAddressList” where we will implement google address autocomplete and once customer clicks the address from suggestion we will fill other address fields.
Now the script that performs the autocomplete and when visitor clicks the address it autofills the address fields.
<script type="text/javascript">
// google map and address
var autocomplete;
const 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 googleMapInit() {
autocomplete = new google.maps.places.Autocomplete(
document.getElementById("searchAddressList"),
{ types: ["geocode"] }
);
autocomplete.setFields(["address_component"]);
autocomplete.addListener("place_changed", fillInAddress);
}
google.maps.event.addDomListener(window, 'load', googleMapInit);
function fillInAddress() {
$('#country').val('');
$('#zip').val('');
$('#province').val('');
$('#city').val('');
$('#address').val('');
const place = autocomplete.getPlace()
for (const component of place.address_components) {
const addressType = component.types[0];
if (componentForm[addressType]) {
const val = component[componentForm[addressType]];
switch(addressType) {
case 'country':
$('#country').val(val)
break;
case 'postal_code':
$('#zip').val(val)
break;
case 'administrative_area_level_1':
$('#province').val(val)
break;
case 'locality':
$('#city').val(val)
break;
case 'route':
$('#address').val(val)
break;
}
}
}
}
</script>
To modify the search results for example, above will return all address, if you want full address with country restrictions replace googleMapInit() function with below code snippet.
function googleMapInit() {
autocomplete = new google.maps.places.Autocomplete(
document.getElementById("searchAddressList"),
{ types: ["address"],componentRestrictions: {country: 'us'} }
);
autocomplete.setFields(["address_component"]);
autocomplete.addListener("place_changed", fillInAddress);
}
So complete code snippet will be as below:
<!DOCTYPE html>
<html>
<head>
<title>Google Autocomplete Implementation</title>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="searchAddressList">
<input type="text" id="country">
<input type="text" id="zip">
<input type="text" id="province">
<input type="text" id="city">
<input type="text" id="address">
</body>
</html>
<script type="text/javascript">
// google map and address
var autocomplete;
const 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 googleMapInit() {
autocomplete = new google.maps.places.Autocomplete(
document.getElementById("searchAddressList"),
{ types: ["address"],componentRestrictions: {country: 'us'} }
);
autocomplete.setFields(["address_component"]);
autocomplete.addListener("place_changed", fillInAddress);
}
google.maps.event.addDomListener(window, 'load', googleMapInit);
function fillInAddress() {
$('#country').val('');
$('#zip').val('');
$('#province').val('');
$('#city').val('');
$('#address').val('');
const place = autocomplete.getPlace()
for (const component of place.address_components) {
const addressType = component.types[0];
if (componentForm[addressType]) {
const val = component[componentForm[addressType]];
switch(addressType) {
case 'country':
$('#country').val(val)
break;
case 'postal_code':
$('#zip').val(val)
break;
case 'administrative_area_level_1':
$('#province').val(val)
break;
case 'locality':
$('#city').val(val)
break;
case 'route':
$('#address').val(val)
break;
}
}
}
}
</script>
</body>
</html>
That’s it, you should see the result as below screenshot.
If you have problem loading the autocomplete suggestion, try checking your browser console logs and see if there is any issue with permission or billing on your API key.
Cheers!!