Address Auto Complete

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

Here in 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 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 auto complete address without different fields like Street address, Route, City, etc... then just use 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 configure when you used 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 below code.

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>