Google API
1. Get Google API Key
In this post, we will guide you on “How to get Google API for a site”?.
You also read more here. Register your application for Google Maps
1.1. Create your project
Go to Google Maps Platform
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
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
Check the issue
When you see these notices, 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.
Type 2: Oops! Something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details
a. Referer restrictions cannot be used
API keys with referer restrictions cannot be used with this API
Car Transfer requires API with no referer restrictions. Kindly set Application restrictions - None if you are using the Car Transfer service.
b. RefererNotAllowedMapError
Google Maps JavaScript API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: https://travelerwp.com/wp-admin/post.php
If your specific credentials have Application restrictions, kindly input in HTTP referrers (websites) > Website restrictions
Edit in https://console.cloud.google.com/google/maps-apis/credentials then select specific credentials
domain.com
*.domain.com
domain.com/*
*.domain.com/*
c. Specific APIs
Google Maps needs to enable these specific APIs: Distance Matrix API, Maps Embed API, Maps JavaScript, and Places API.
Check: https://console.cloud.google.com/google/maps-apis/api-list
Last updated
