How to create Autocomplete Address Form using Google API

Does your application include an address form, such as the Billing and Shipping address for your online store, a credit card billing address, or a taxi booking form? Autocomplete can help users supply the details.

This feature i based on Places library in the Google Maps JavaScript API. You can use autocomplete to give your applications the type-ahead-search behavior of the Google Maps search field. When a user starts typing an address, autocomplete will fill in the rest.

Google Map API

Download Demo

Add this script

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCfBF7KS82PQKFep-Yes9gW0pa6P9TO9Dc&libraries=places&callback=initAutocomplete"
        async defer></script>

1 2	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCfBF7KS82PQKFep-Yes9gW0pa6P9TO9Dc&libraries=places&callback=initAutocomplete" async defer></script>

HTML Code

 <div id="locationField">
      <input id="autocomplete" placeholder="Enter your address"
             onFocus="geolocate()" type="text"></input>
    </div>

    <table id="address">
      <tr>
        <td class="label">Street address</td>
        <td class="slimField"><input class="field" id="street_number"
              disabled="true"></input></td>
        <td class="wideField" colspan="2"><input class="field" id="route"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">City</td>
        <td class="wideField" colspan="3"><input class="field" id="locality"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">State</td>
        <td class="slimField"><input class="field"
              id="administrative_area_level_1" disabled="true"></input></td>
        <td class="label">Zip code</td>
        <td class="wideField"><input class="field" id="postal_code"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3"><input class="field"
              id="country" disabled="true"></input></td>
      </tr>
    </table>

<input id="autocomplete" placeholder="Enter your address"

onFocus="geolocate()" type="text"></input>

</div>

<tr>

<td class="label">Street address</td>

<td class="slimField"><input class="field" id="street_number"

disabled="true"></input></td>

<td class="wideField" colspan="2"><input class="field" id="route"

disabled="true"></input></td>

</tr>

<tr>

<td class="wideField" colspan="3"><input class="field" id="locality"

disabled="true"></input></td>

</tr>

<tr>

<td class="label">State</td>

<td class="slimField"><input class="field"

id="administrative_area_level_1" disabled="true"></input></td>

<td class="wideField"><input class="field" id="postal_code"

disabled="true"></input></td>

</tr>

<tr>

<td class="label">Country</td>

<td class="wideField" colspan="3"><input class="field"

id="country" disabled="true"></input></td>

</tr>

</table>

Set the bounds on creation of the Autocomplete object

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));
var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};
autocomplete = new google.maps.places.Autocomplete(input, options);

var defaultBounds = new google.maps.LatLngBounds(

new google.maps.LatLng(-33.8902, 151.1759),

new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var options = {

bounds: defaultBounds,

types: ['establishment']

};

autocomplete = new google.maps.places.Autocomplete(input, options);

Get place information from Autocomplete

By default, autocomplete will give you the full address as a single line of text. For an address form, it is useful to get the address in structured format.
Below code will autocomplete fill your address form.

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  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;
    }
  }
}

function fillInAddress() {

// Get the place details from the autocomplete object.

var place = autocomplete.getPlace();

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;

}

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

How to create Autocomplete Address Form using Google API

Add this script

HTML Code

Set the bounds on creation of the Autocomplete object

Get place information from Autocomplete

Recommended Posts:

webmentor