Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    magento-hyperlocal-marketplace-guide

    How to Integrate AutoComplete Google Address In Magento 2

    Generally people find annoying to fill the web forms, while filling manually all the details may be error-prone and may lead to the error in validation. So here is the example by which we can reduce the manually filling of addresses by using the Google autocomplete API.
    Benefits of Google Address AutoComplete :
    1. Reduces Validation Issues.
    2. Enable Quick filling of the fields.
    3. Ensures Accuracy and many more.

    Now here are the steps to Integrate the API  In Magento 2:
    Step 1 : Create a basic structure of Magento 2 module ,
    please check this link for the reference : https://webkul.com/blog/create-hello-module-in-magento2/

    Steps 2 : I want to add the address field in registration page , We need to create the layout handle first in this path : app/code/<vendor_name>/<module_name>/view/frontend/layout/customer_account_create.xml


    Step 3 : Create .phtml file in this path : app/code/<vendor_name>/<module_name>/view/templates/autofill.phtml


    Step 4 : Create the block From where I have retrieved the Google API Key .
    app/code/<vendor_name>/<module_name>/Block/Autofill.php





    You can modify the file as per your convenience.



    It will look like this :

    Note
    : You can integrate this API and checkout page as well while filling the shipping and address information.  Here is the google docs link from where you can read more about Google API.
    https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform?hl=fr 

     

    . . .

    Comment (1)

    Add Your Comment

  • sivakumar
    i’m getting undefined values after pressing enter
  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close