Post
Ask Question

Autofill Address form using Google palces API in JavaScript

Step 1 : Create an HTML file and write the following code.

  1. <div class="row">  
  2.     <form role="form">  
  3.         <div class="form-group">  
  4.             <label for="email">Full Address:</label>  
  5.             <input type="text" id="FullAddress" class="form-control" />  
  6.         </div>  
  7.         <div class="form-group">  
  8.             <label for="email">Country Name:</label>  
  9.             <input type="text" id="CountryName" class="form-control" />  
  10.         </div>  
  11.         <div class="form-group">  
  12.             <label for="email">State Name:</label>  
  13.             <input type="text" id="StateName" class="form-control" />  
  14.         </div>  
  15.         <div class="form-group">  
  16.             <label for="email">City Name:</label>  
  17.             <input type="text" id="CityName" class="form-control" />  
  18.         </div>  
  19.         <div class="form-group">  
  20.             <label for="email">Zipcode:</label>  
  21.             <input type="text" id="Zipcode" class="form-control" />  
  22.         </div>  
  23.         <button type="submit" class="btn btn-default">Submit</button>  
  24.     </form>  
  25. </div> 
Step 2: Add Google places API reference in your page.
  1. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>   
Step 3 : Next put this JavaScript code inside the head tag.

  2. <script type="text/javascript">  
  3.     var placeSearch, autocomplete;  
  4.   
  5.     var addressForm = {  
  6.         CityName: 'locality',  
  7.         StateName: 'administrative_area_level_1',  
  8.         CountryName: 'country',  
  9.         Zipcode: 'postal_code'  
  10.     };  
  11.     var componentForm = {  
  12.         locality: 'long_name',  
  13.         administrative_area_level_1: 'long_name',  
  14.         country: 'long_name',  
  15.         postal_code: 'short_name'  
  16.     };  
  17.   
  18.     initAutocomplete();  
  19.     function initAutocomplete() {  
  20.         debugger;  
  21.         autocomplete = new google.maps.places.Autocomplete((document.getElementById('FullAddress')),  
  22.             { types: ['geocode'] });  
  23.         autocomplete.addListener('place_changed', fillInAddress);  
  24.     }  
  25.   
  26.     function fillInAddress() {  
  27.         var place = autocomplete.getPlace();  
  28.         hfLatitude.val(place.geometry.location.lat());  
  29.         hfLongitude.val(place.geometry.location.lng());  
  30.   
  31.         for (var component in addressForm) {  
  32.             document.getElementById(component).value = '';  
  33.             document.getElementById(component).disabled = false;  
  34.         }  
  35.         for (var i = 0; i < place.address_components.length; i++) {  
  36.             var addressType = place.address_components[i].types[0];  
  37.             if (componentForm[addressType]) {  
  38.                 var val = place.address_components[i][componentForm[addressType]];  
  39.                 document.getElementById(getComponentKey(addressType)).value = val;  
  40.             }  
  41.         }  
  42.     }  
  43.     function getComponentKey(val) {  
  44.         for (var key in addressForm) {  
  45.             this_val = addressForm[key];  
  46.             if (this_val == val) {  
  47.                 return key;  
  48.                 break;  
  49.             }  
  50.         }  
  51.     }  
  52. </script>