Auto Complete address form using google map api

by

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.

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.


      
    


    

      

        Street address
        
        
      

      

        City
        
      

      

        State
        
        Zip code
        
      

      

        Country

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

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

Published by Rohit