How to Configure Google Map API?

Table of Contents

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

Getting Google API Key

Creating your project

Google API Image 1
  • 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.
Google API Image 2
  • In the updated window, choose ‘Select a project ’ and enter the project name (e.g. Set Compass) in the box below. Then click Next.
Google API Image 3

Creating a billing account

  • In the updated window, click Create Billing Account.
Google API Image 4
  • 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.
Google API Image 5
  • 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
Google API Image 7
  • 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.
Google API Image 8

Getting your API key

  • After clicking Next in Step 2, will be offered to enable your APIs. Press Next.
Google API Image 9
  • 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.
Google API Image 10
  • (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.
Google API Image 11
  • (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.
Google API Image 12

Adding API Key into Traveler

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


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.

Google API Image 14

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

Google API Image 15

There are 2 error types, including:

  1. Google Maps API Error: RefererNotAllowedMapError.
  2. 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.


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.
  • Click Save and wait a few minutes to refresh your site
Google API Image 17

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
Google API Image 16

Specific APIs

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

Google API Image 18