This section will explain how to add the “Google API key” to WP Maps. Furthermore, since Google has changed the rules of its platform, you will need to have a Google Maps API key to use the services of Google Maps. Otherwise, Google Maps will not function on your website.
Google Maps not Functioning
A step-by-step guide to creating the Google API keys
Step 1: Go to Google Cloud Console (https://console.cloud.google.com/) and create a “new project”
Step 2: Name the project and click on it to view the project dashboard
Step 3: To enable the APIs that will be used in your store locator, go to the google cloud platform and click on the “Library” Tab under “APIs and services”, in the navigation menu. The 4 libraries that need to be enabled are:
- Maps JavaScript API
- Directions API
- Geocoding API
- Places API
All APIs Enabled
Step 4: Click on “Go to API overview”, and go to “credentials”
Google Cloud Platform
Step 5: Click on “CREATE CREDENTIALS” to generate the “Google API Key”. Copy this key into your WP Maps account.
Generate API Key
Step 6: On the WP Maps Store locator go to the “Super Admin” section on the sidebar menu
Step 7: Paste the generated API under “Google Maps” in the “API keys” tab
Paste the API Key in WP Maps
Step 8: Go back to your store locator and Google Maps will be functioning properly now.
How to restrict Google Maps API for your website only
To prevent other websites from using your API keys, please do the following:
Step 1: On the “Google Cloud Platform” go-to “Credentials”
Step 2: Click on the “Edit API Key” icon for the API key you want to restrict
Step 3: On the “Restrict and rename API key” page, select the “HTTP referees (websites)” option under “Application restriction”
Step 4: Copy the address of your website from the URL (without the URL protocol) and paste it in the “ADD AN ITEM” box (click on “ADD AN ITEM” to get this)
Step 5: Add another item and paste your address with “/*” at the end
Step 6: Press “Save” and your APIs will be restricted
Restrict Google Map API
Associating an API key with a Billing Account
Step 1: Go to Google Cloud Platform and on the navigation menu, click on “Billings”
Step 2: Click on “LINK A BILLING ACCOUNT”
Step 3: Next, click on “CREATE BILLING ACCOUNT” for the project which is using the API keys
Step 4: In step 1 of 2, read and accept the terms of service
Step 5: In step 2 of 2, choose your account type (Business or Individual)
Set up a billing account
Step 6: Provide your preferred payment method and address, and click on “START MY FREE TRIAL”
Step 7: Go to WP Maps dashboard and update the Store Locator build so that the Google API key can be used
Generate a new code for the store locator
Step 8: Updating the build will generate a code, copy this code and replace it in WordPress, and update the page
Update the WordPress Page
Once this is done your store locator will have a fully functioning Google Map with all the enabled APIs.
Thank you for reading, I hope this article helped you in successfully creating a Google Maps API key.