Google API

1. Get Google API Key

In this post, we will guide you on “How to get Google API for a site”?.

1.1. Create your project

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

1.2. Create a billing account

  1. 1.
    In the updated window, click Create Billing Account.
2. Create a name for your billing project and press Continue. Fill in the form with your contact data and payment information. Click Next.
3. 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.
4. Open the console left side menu and select Billing
5. You can Try Google Cloud Platform for a free trial to accept the terms of services
6. Enter the name of the billing account and enter your billing information. The option you see depends on your billing address.
7. Click Submit and Enable billing.

1.3. Get your API key.

1. After clicking Next in Step 2, will be offered to enable your APIs. Press Next.
2. 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.
3. (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.
4. (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.

2. Add API into Traveler

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

3. Troubleshooting

3.1. Check the issue

When you see these notice, kindly press F12 (or Right Mouse Click > Inspect) then choose tab Console to check the root of the issue
Type 1 : This page can't load Google Maps correctly.
This page can't load Google Maps correctly
Type 2: Oops! Something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details
This page didn’t load Google Maps correctly

3.2. RefererNotAllowedMapError

Your site URL to be authorized:
If your specific credentials has Application restrictions, kindly input in HTTP referrers (websites) > Website restrictions
Edit in then select specific credentials
  • *
  • **

3.3. Specific APIs

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