QloApps Auto-fill Address Form|Google Addresses

QloApps Auto-fill Address Form is an add-on for QloApps which makes it easier for customers and admin to complete address field.

In this, they only have to hint the browser the location name. It will give various options to them to select from.

Thus, enhancing user experience and eliminating the chance of error.

Filling out forms is time-consuming, especially on mobile devices.

Thus, by using this module guest only has to select a location then city, zip-code and country name is automatically filled.

There are three significant functionalities of this module. These are:

  • Auto-detect the location– By feature allows to detect of the current location of the user.
  • Address Suggestions-Based on the search, the JavaScript API retrieves the data from the Places library to display results.
  • Google Maps- Use Google maps and pinpoint the exact location on the map. The address of that location will be filled in automatically in the form.
  • Set the default zoom level to display Google Maps.
  • Enable or disable address suggestions on the back-end as well as front-end.
  • Choose to enable or disable the auto-detection of location(address).
  • Show or hide the Google Maps for address selection.
  • Enable or disable the automatic filling of the city, state country and zip-code based on the location.
  • To fill out the address details, pinpoint the location on Google Maps.
  • Generate API keys to use these functionalities of the module.

The installation of any module is very simple in QloApps.

  • Go to the Module and Services tab.
  • Click on Add New Module.

Now upload the Zip file of Module and click on Install.

Now You Have Installed The Module.

Now, let’s see how to get API Keys of the module.

You need API keys for the configuration of the module. To get the API keys of the module go to the website by clicking on this link https://console.cloud.google.com/.

And sign in here with your Google account. After signing in, you will be redirected to home page.

In that go to APIs & Services —> Dashboard

To go to APIs library, click on the button “ENABLE APIS AND SERVICES” or ” library” as show below.

Select the ‘Maps’ on the page and then continue to view all the map APIs.

 You’ll redirected on a new page after clicking on the “View all” tab.

You will access all the APIs for maps on this tab. You need to find the following three APIs on this page:

  • Geocoding API
  • Maps JavaScript API
  • Places API

Click on each of the blocks & proceed to enable these APIs.

Go to APIs & Services->Dashboard after enabling all the three APIs. You’ll see a ‘Credentials’ tab there.

You can find a list of all the previously created APIs under ‘Credentials’.

Now, click on the “Create credentials” button from where you can generate new API after clicking on API key

The new API key will have all the three services enabled. You can see this newly created API key in the API keys list.

In this way, you can easily generate API keys.

To configure the module, enter the API keys & set the default zoom level.

In addition, you can opt to allow or disable these front-end and back-end settings.

Enter the API key generated in Google API key and default zoom value. And click on save button.

After clicking, a new options appear on the same page as shown in the image below.

Enable/ disable the back-end and front-end options as save it.

After clicking on the “Address“, a guest can see all the saved addresses. Either edit the existing address or proceed to add a new one.

With the help of this module guest can add address with the help of these three functionalities.

  • By Automatically detecting the location with the help of the “locate me” button,
  • By selecting a suitable address out of the suggestions, or
  • Pinpoint the location on the Google Maps

Use Google Maps to pin-point the location

When a visitor has not created his/her accounts. So, during the time of check-out, he/she has to fill the guest information form.

In this form, guest can use auto-fill functionality to fill address.

On behalf of the consumer, the admin can also create a new order.

To create a new order, go to order and click on “Add new order” button as shown below

Search and choose customer from there or admin can also add a new customer.

The following page opens after the customer is chosen. As you can see in address field option is to edit address or add a new address.

In either case, you get all three functionalities i.e., auto-detection of location, address suggestions based on search,

Or pinpointing of location on Google Maps.

When admin select edit address, then following page appears.

If admin select add new address then he can fill address with the use of Google map, or auto-detection or search suggestion.

Admin can add or edit address from backend by clicking on “Address” on “Customers” tab.

From here admin can add or edit customer’s address.

A new page appears when admin click on edit tab. From that page he can edit address of customer as shown below.

When admin clicks on add new address following page appears.

At last admin can enjoy auto-fill functionality at the last “Store Contacts”.

For this he has to go to “Preferences” and select “Store Contact”.

All the three functionalities are available here on contact details.

When adding address of a new store.

That was all from the QloApps Auto-fill Address Form| Google Addresses.

 I hope I was able to clarify the add-on in the best possible way.

If you want to learn about the functionality of QloApps then you can visit this link: QLO Reservation System – Free Open-Source Hotel Booking & Reservation System

In case of any query, issue, or requirement please feel free to raise it on QloApps Forum

Category(s) Qloapps Modules
. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Table of ContentHide Index