Back

How to Configure Google Map API?

Google Maps API enables developers to integrate Google Maps into their own websites or applications. It allows developers to customize maps, and add markers and overlays to their maps. To access Google Maps API, you need to get Google API Key and add it to your website.

Note: Google Map API is not free. You need to set up a billing account first to use API. This is Google Map Pricing that scales to fit your needs https://mapsplatform.google.com/pricing/

Getting Google API Key

Creating your project

Go to Google Maps Platform

Press the ‘ Get Started ’ button. In the window that opens, tick all options. Press Continue. At this stage, you will be asked to create a Google account or log in to your existing one.

In the updated window, choose ‘Select a project ’ and enter the project name (e.g. Set Compass) in the box below. Then click Next.

Creating a billing account

In the updated window, click Create Billing Account.

Create a name for your billing project and press Continue. Fill in the form with your contact data and payment information. Click Next.
API is already created which means you are already logged in to the account. If you are signed out then go to the Google Cloud Platform console and sign in and select the project where you want to attach the billing account.

Open the console left side menu and select Billing

You can Try Google Cloud Platform for a free trial to accept the terms of services

Enter the name of the billing account and enter your billing information. The option you see depends on your billing address.

Click Submit and Enable billing.

Getting your API key

After clicking Next in Step 2, will be offered to enable your APIs. Press Next.

You will see a new window with your API key in the box. Save the key to be able to use it and press Done.

(Optional) To protect your API Key and prevent anyone else from using it, click on credentials in the left pane then click on the project name as shown below.

(Optional) From Application restrictions select HTTP referrers (Web sites), enter your site url in the Accept requests from these HTTP referrers (Web sites). Then click Save.
Note: It may take up to 5 minutes for settings to take effect.

Adding API Key into Traveler

Go to Theme Options> Other Options > Google map API then input your API

Troubleshooting

Check the issue

Now you need to find out what type of error that appears on your website. Let’s open the Javascript console to see this error. Enter the key combination below and choose Console tab to see

Chrome: Ctrl + Shift + J (Windows and Linus) or CMD + Opt + J (Mac OS).
Safari: CMD + Opt + C.
Firefox: Ctrl + Shift + K (Windows and Linus) or CMD + Opt + K (Mac OS).

Problem 1: This page can’t load Google Maps correctly.

Problem 2: Oops! Something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details

There are 2 error types, including:

Google Maps API Error: RefererNotAllowedMapError.
Google Maps API Error: Referer restrictions cannot be used

Once we identify the error on your site, we will provide specific solutions based on the type of error.

RefererNotAllowedMapError

To fix this error, simply do the following steps:

Open Credential Console and then select specific credentials
In the Application Restrictions section, make sure that you have already chosen HTTP referrers (websites) and added both of the entries.
domain.com
*.domain.com
domain.com/*
*.domain.com/*
Click Save and wait a few minutes to refresh your site

Referer restrictions cannot be used

Car Transfer requires API with no referer restrictions. Kindly set Application Restrictions – None if you are using the Car Transfer service.

Open Credential Console and then select specific credentials
In the Application Restrictions section, make sure that you have already chosen Application Restrictions – None
Click Save and wait a few minutes to see the result

Specific APIs

Google Maps needs to enable these specific APIs: Distance Matrix API, Maps Embed API, Maps JavaScript, and Places API.

Open Google Map API List and add these specific API below
Click Save