facebook_pixelimg
logo
Get in touch
Get in touch

Welcome to Our Helpdesk

You will get all the detailed information for your queries related to our Shopify apps.

Address Field Auto Complete

view 7187 Views
May 05, 2023

If you want an auto-complete address like the above video then you just need to go through the below code.

Here is code [YOURAPIKEY] is needs to be your Google map API key & ‘YOUR FORM ID’ needs to be your created form ID. You will get the form ID from the inspect element of the browser like the below screenshot.

Below is the sample code.

<script src=”https://maps.googleapis.com/maps/api/js?key=[YOURAPIKEY]&libraries=places&callback=PlaceAutocompleteSearch” async defer></script>
<script>
function csFormShotcodeLoded(formId) {
if (formId == ‘YOUR FORM ID’) {
var placeSearch, autocomplete;
autocomplete = new google.maps.places.Autocomplete((document.getElementById(‘address’)), { types: [‘geocode’] });

autocomplete.addListener(‘place_changed’, fillInAddress);

function fillInAddress() {
var place = autocomplete.getPlace();
$(‘#street_address’).val(”);
$(‘#route’).val(”);
$(‘#city’).val(”);
$(‘#state’).val(”);
$(‘#zip_code’).val(”);
$(‘#country’).val(”);

$(‘#street_address’).val(place.address_components[0].long_name);
$(‘#route’).val(place.address_components[1].long_name);
$(‘#city’).val(place.address_components[3].long_name);
$(‘#state’).val(place.address_components[5].long_name);
$(‘#zip_code’).val(place.address_components[7].long_name);
$(‘#country’).val(place.address_components[6].long_name);
}
}
}
</script>

 

If you want just an auto-complete address without different fields like Street address, Route, City, etc… then just use the below code.

<script src=”https://maps.googleapis.com/maps/api/js?key=[YOURAPIKEY]&libraries=places&callback=PlaceAutocompleteSearch” async defer></script>
<script>
function csFormShotcodeLoded(formId) {
if (formId == ‘YOUR FORM ID’) {
var placeSearch, autocomplete;
autocomplete = new google.maps.places.Autocomplete((document.getElementById(‘address’)), { types: [‘geocode’] });
}
}
</script>

 

Note: Above code is configured when you used the shortcode to init the form on your page.

If you used HTML code to set the form on your page then you have to use the below code.

The below code is with HTML form code with just the Address auto-complete field.

<script src=”https://maps.googleapis.com/maps/api/js?key=[YOURAPIKEY]&libraries=places&callback=PlaceAutocompleteSearch” async defer></script>
<script>
function PlaceAutocompleteSearch() {
var autocomplete;
autocomplete = new google.maps.places.Autocomplete((document.getElementById(‘address’)), { types: [‘geocode’] });
}
</script>