Auto Complete address form using google map api

This is a very useful tutorial for developers who are working on shipping type of project like e-commerce, we always face problem to get all county state city and zip code database, If some how we collect the data but still there is not guaranty for accuracy, So if you are working on same thing and your project need is to get user accurate location with zipcode. Then you can use google auto complete address form. But using google this feature you must have google api to authenticate request.
auto-complete-address-5


How to get google api key?

Step.1: For using google map api you must have to create google api key. go to this link and click on GET A LINK button.
https://developers.google.com/maps/documentation/javascript/get-api-key
auto-complete-address

Step.2: After that you have to login with your google account, after successful login you’ll see a new window where you need to create a project. select create a new project and click Continue button.
auto-complete-address-1

Step.3: In new window you’ll able to see your google api management console where you can manage your all google api based projects. here you need to enter your api name by which you can identify your multiple api keys.
auto-complete-address-3

Step.4: Finally click on Create button , a popup window will be open with api key which you can use for any google api authentication.
auto-complete-address-4

Creating auto complete address form

Step.1: First add one line google map api library with your api key on your page.

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

Step-2: Create sample html form where in search box you need to search for location and as on select event all location parameter will be auto filled.

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

Step-3: Finally apply javascript to make it in action. add below javascript before body close tag on page.

<script>
      
      
 
      
      
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
 
      var placeSearch, autocomplete;
      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 initAutocomplete() {
        
        
        autocomplete = new google.maps.places.Autocomplete(
            (document.getElementById('autocomplete')),
            {types: ['geocode']});
 
        
        
        autocomplete.addListener('place_changed', fillInAddress);
      }
 
      function fillInAddress() {
        
        var place = autocomplete.getPlace();
 
        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }
 
        
        
        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 geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }
    </script>

See live demo and download source code.

DEMO

DOWNLOAD

If you like this post please don’t forget to subscribe my public notebook for more useful stuff