Back to Top

Guide for Magento 2 Google Address Autocomplete Extension

Updated 4 March 2024

Using the Magento 2 Google Address Autocomplete Extension now the users/customers of your Magento 2 store can easily enter their address using the Google auto address suggestion at the checkout page.

Apart from that, the customers can enter their address under their address book using the feature as well.

The admin on the other hand will be able to configure the plugin by enabling the functionality and entering the Google API key in the plugin’s configuration settings.

The admin will also be able to use the Google auto address suggestion to add the address of the customers while creating an order and when editing the address of the customer.

With the autocomplete feature, customers no longer need to type their entire address, which can take time and lead to errors. Instead, they can select their address from the suggestions provided by Google Address Autocomplete. 

Apart from that, A long and tedious checkout process can lead to Magento 2 cart abandonment. By providing a fast and efficient checkout process, you can reduce the chances of customers abandoning their carts.

Searching for an experienced
Magento 2 Company ?
Find out More

Check how you can add this extension from the admin backend panel and how it will reflect on the storefront in the mentioned video:

WsYOmxqy9EM

Features

  • Google Address Autocomplete for customers’ add address section.
  • Google Address Autocomplete for the checkout section.
  • Google Address Autocomplete for placing orders from the admin panel.
  • Google Address Autocomplete for editing customer addresses from the admin panel.
  • Google Address Autocomplete for editing all the order’s addresses from the admin panel.

Installation

#Download Module

Firstly, you need to log in to Webkul Store, go to My Account>My Purchased Products section, verify and then download and extract the contents of this zip folder on the system.

#Upload Folder

Once the module zip for Magento 2 Google Address Autocomplete Extension is extracted, follow path src>app and then copy the app folder into the Magento 2 root directory on the server as shown below:

Magento 2 Google Address Auto Complete Installation

#3 Run Commands

You need to run the following commands:

  • php bin/magento setup:upgrade
  • php bin/magento setup:di:compile
  • php bin/magento setup:static-content:deploy
  • php bin/magento indexer:reindex
  • php bin/magento cache:flush

Language Translation

For translating the module language, navigate through src/app/code/Webkul/GoogleAddressAutoComplete/i18n and edit the en_US.csv file. Thereafter, rename the CSV as “en_SA.csv” and translate all right side content after the comma in the Arabic language. After editing the CSV, save it.

Magento 2 Google Address Auto Complete i18 Folder

Now, upload it to the path src/app/code/Webkul/GoogleAddressAutoComplete/i18n where the installation of Magento 2 is on the server. The module gets translated into the Arabic Language. It supports both RTL and LTR languages.

The user can edit the CSV like the image below.

Magento 2 Google Address Auto Complete Translation

How to get the Google Maps API Key

Step 1. Go to console.developers.google.com and log in using your Gmail ID. After that, click on the Select a project option.

Magento 2 Google Address Auto Complete

Step 2. Click on New Project Button. After that, you need to enter the name of the project and Browse the location of the organization.

Magento 2 Google Address Auto Complete New Project

Step 3. After creating the project click on the Enable API And Services.

Magento 2 Google Address Auto Complete Enable API

Step 4. Then click on the Maps JavaScript API to get the API key.

Magento 2 Google Address Auto Complete Maps Javascript

Step 5. After clicking on the Maps JavaScript API, you need to click on the ENABLE button.

Magento 2 Google Address Auto Complete Maps JavaSacript API

Step 6. Once you have enabled the API then you need to navigate through Credentials> Credentials in APIs & Services.

Magento 2 Google Address Auto Complete CREDENTIALS

Step 7. After that, you need to click on the create credentials and select the API key.

Magento 2 Google Address Auto Complete API key

Step 8. Now you can copy the generated API key.

Magento 2 Google Address Auto Complete API Created

Initial Configuration Settings

After the successful installation of the extension, the admin will navigate through Stores->Configuration->Google Address Autofill.

5-2

Here, the admin will –

  • Enable the plugin functionality by choosing the option as a Yes else to disable the functionality choose it as a NO.
  • Enter the Google Map API Key as required.

At Checkout – Goggle Auto Address Suggestion

At checkout time, the customers/users can add their street address and the suggestion for the address is displayed by the Google Auto Address suggestion as shown below in the snapshot.

After that, the customer/user can choose the most appropriate one and then proceed further to place the order.

2-5

Address Book – Google Auto Address Suggestion

The customers can add their addresses within the address book using the Google Auto Address suggestion feature.

1-5

So, the customers can add the address via the address auto-complete at the checkout time or within the address book section as required for filling up the Magento 2 Google Maps Pin Address to proceed further.

Admin – Add Address Via Google Auto Address Suggestion

The admin while editing customer information, can add the address using the Google Auto Address suggestion feature as shown below in the snapshot.

3-3

The admin whilst creating an order from the admin backend can add the address for the customer using the Google Auto Address suggestion feature as shown below in the snapshot.

4-2

Support

That is all about the Magento 2 Google Address Auto Complete extension. If you have any queries regarding the plugin, please contact us at Webkul Support System.

If you’re looking to create a custom e-commerce website, it’s a great idea to hire Magento developers who can help you build a powerful and scalable online store.

You can also check our complete Magento 2 extensions.

Current Product Version - 4.0.2

Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

. . .

Leave a Comment

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


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content