As per Google’s announcement, Google Maps need an API Key to load on a website. See updates here
Some of our themes are using Maps integrated in the theme itself, for this new change we are adding a new section at Theme Options i.e. “Map API”. Where you need to enter your API key to keep using the Maps without interruptions. Page Builder map widget will ask to enter the API key within the widget.
How to get your API Key for the Google Maps
1. Login in to your Google account first
2. Go to https://console.developers.google.com/apis/dashboard dashboard projects and create a new project or choose any existing project
3. Enter your project name. It can be any unique name which you can recognise as setup for showing maps on your website
4. On the next redirected page click on the “Enable APIs & Services” to create the API Key
5. On the following page click the “Maps Javascript API” button to add services to the API
6. Click “Enable”
7. On the next page copy the API key to use in your themes/plugins.
8. Make sure you should not have any spaces before or after the key while pasting it in your Theme Options or in any other plugins settings.
How to enable API key for different services for the project. A single key of any project can be used for number of Google Services. Go to this link
On the next page:
Enable the API:
How to add Geocoding API to your existing key:
- Go to this URL https://console.cloud.google.com/project/_/google/maps-apis/api-list
- Select your API project
- Go to API library
- Choose Geocoding API from under the heading ‘Additional APIs’
- Enable the API
Ensuring Your Referrers are Properly Inserted
Incorrectly inserting your referrers in your Google Map API project can result in your Map not being properly displayed. You’ll find an error message from the Google Maps API (RefererNotAllowedMapError) in the JavaScript console of your website.
To fix this problem, return to the Google API Manager. (Note: If you haven’t set up a Google Maps API project for your website. The referrers are set in the Credentials. Click Credentials in the right-hand column in the Dashboard. Then click the Pencil icon to the right of the API key for your Google Maps project. You will want to restrict access to your API Key to avoid having it “hijacked” and going over your quota. Click the Restrict key button on the API key created window as shown below.
Scroll down to the Key restriction heading and select HTTP referrers (web sites). Add the following referrers to the text boxes below Accept requests from these HTTP referrers (web sites), replacing example.com with your domain name:
- *.example.com/*
- *example.com/*
Now, scroll down and click the Save button to save your changes.