Create Place Auto Complete Address Form With Google Maps API

Published by akhisyabab

How to auto complete address form with google maps API

Auto complete address form , Hi…. welcome in infinitricks. I will show you how to make auto complete address to your form. There are several ways how to create it. But this time i will show you make auto complete address with Google Maps API.

Why with google maps API?

If we use google maps API, we get a lot of data that can not input into the database one by one . By using this way, we can easily to make it without address data in database. But not forever the data we get from maps can auto complete to all available form. It would not hurt us to try whether it is worth it or not for our app.





How to make it?

First you must have google places API webservice key. You can get your key in here. Next this is the example code, (API KEY on the lastest script tag):

<!-- sumber: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform#try-it-yourself -->
<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete Address Form With Google Maps API</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.3.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpopper.js%2F1.12.9%2Fumd%2Fpopper.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F4.0.0%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  </head>

  <body>
    
<div class="container">
    
<h2>Place Autocomplete Address Form With Google Maps API</h2>

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


    
<table id="address" class="table">
      
<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>

        <!-- Note: Selection of address components in this example is typical. You may need to adjust it for the locations relevant to your app. See https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform -->
        
<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>


    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%2F%2F%20This%20example%20displays%20an%20address%20form%2C%20using%20the%20autocomplete%20feature%0A%20%20%20%20%20%20%2F%2F%20of%20the%20Google%20Places%20API%20to%20help%20users%20fill%20in%20the%20information.%0A%0A%20%20%20%20%20%20%2F%2F%20This%20example%20requires%20the%20Places%20library.%20Include%20the%20libraries%3Dplaces%0A%20%20%20%20%20%20%2F%2F%20parameter%20when%20you%20first%20load%20the%20API.%20For%20example%3A%0A%20%20%20%20%20%20%2F%2F%20%3Cscript%20src%3D%22https%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fjs%3Fkey%3DYOUR_API_KEY%26libraries%3Dplaces%22%3E%0A%0A%20%20%20%20%20%20var%20placeSearch%2C%20autocomplete%3B%0A%20%20%20%20%20%20var%20componentForm%20%3D%20%7B%0A%20%20%20%20%20%20%20%20street_number%3A%20'short_name'%2C%0A%20%20%20%20%20%20%20%20route%3A%20'long_name'%2C%0A%20%20%20%20%20%20%20%20locality%3A%20'long_name'%2C%0A%20%20%20%20%20%20%20%20administrative_area_level_1%3A%20'short_name'%2C%0A%20%20%20%20%20%20%20%20country%3A%20'long_name'%2C%0A%20%20%20%20%20%20%20%20postal_code%3A%20'short_name'%0A%20%20%20%20%20%20%7D%3B%0A%0A%20%20%20%20%20%20function%20initAutocomplete()%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Create%20the%20autocomplete%20object%2C%20restricting%20the%20search%20to%20geographical%0A%20%20%20%20%20%20%20%20%2F%2F%20location%20types.%0A%20%20%20%20%20%20%20%20autocomplete%20%3D%20new%20google.maps.places.Autocomplete(%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F**%20%40type%20%7B!HTMLInputElement%7D%20*%2F(document.getElementById('autocomplete'))%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Btypes%3A%20%5B'geocode'%5D%7D)%3B%0A%0A%20%20%20%20%20%20%20%20%2F%2F%20When%20the%20user%20selects%20an%20address%20from%20the%20dropdown%2C%20populate%20the%20address%0A%20%20%20%20%20%20%20%20%2F%2F%20fields%20in%20the%20form.%0A%20%20%20%20%20%20%20%20autocomplete.addListener('place_changed'%2C%20fillInAddress)%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20function%20fillInAddress()%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Get%20the%20place%20details%20from%20the%20autocomplete%20object.%0A%20%20%20%20%20%20%20%20var%20place%20%3D%20autocomplete.getPlace()%3B%0A%0A%20%20%20%20%20%20%20%20for%20(var%20component%20in%20componentForm)%20%7B%0A%20%20%20%20%20%20%20%20%20%20document.getElementById(component).value%20%3D%20''%3B%0A%20%20%20%20%20%20%20%20%20%20document.getElementById(component).disabled%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%2F%2F%20Get%20each%20component%20of%20the%20address%20from%20the%20place%20details%0A%20%20%20%20%20%20%20%20%2F%2F%20and%20fill%20the%20corresponding%20field%20on%20the%20form.%0A%20%20%20%20%20%20%20%20for%20(var%20i%20%3D%200%3B%20i%20%3C%20place.address_components.length%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%20%20%20%20%20var%20addressType%20%3D%20place.address_components%5Bi%5D.types%5B0%5D%3B%0A%20%20%20%20%20%20%20%20%20%20if%20(componentForm%5BaddressType%5D)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20val%20%3D%20place.address_components%5Bi%5D%5BcomponentForm%5BaddressType%5D%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById(addressType).value%20%3D%20val%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%2F%2F%20Bias%20the%20autocomplete%20object%20to%20the%20user's%20geographical%20location%2C%0A%20%20%20%20%20%20%2F%2F%20as%20supplied%20by%20the%20browser's%20'navigator.geolocation'%20object.%0A%20%20%20%20%20%20function%20geolocate()%20%7B%0A%20%20%20%20%20%20%20%20if%20(navigator.geolocation)%20%7B%0A%20%20%20%20%20%20%20%20%20%20navigator.geolocation.getCurrentPosition(function(position)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20geolocation%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20lat%3A%20position.coords.latitude%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20lng%3A%20position.coords.longitude%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20circle%20%3D%20new%20google.maps.Circle(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20center%3A%20geolocation%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20radius%3A%20position.coords.accuracy%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20autocomplete.setBounds(circle.getBounds())%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fjs%3Fkey%3DYOUR_API_KEY%26libraries%3Dplaces%26callback%3DinitAutocomplete%22%20async%20defer%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    </div>

  </body>
</html>

To see results click here. hopefully help you and see you in next post. Bye

Categories: Common Post

Leave a Reply

Your email address will not be published. Required fields are marked *