As of June 2016, Google Maps no longer support keyless access and requires an API Key to work.


Before starting


First, make sure you are using the latest version of our theme and our Anps theme plugin. Older themes don't have the theme plugin and only require the latest version of our theme.


To update the theme, please see our How to upgrade a theme? article.


To update our plugin, simply remove it inside the WordPress admin area under Plugins. Once uninstalled an option to install the plugin will become available. Navigate to Appearance - Install Plugins to install the latest version.


Getting the API key


Generate an API key

  1. Go to the Google API Console.
  2. Create or select a project.
  3. Click Continue to enable the API and any related services.
  4. On the Credentials page, get a Browser key (and set the API Credentials). 
  5. Note: If you have an existing Browser key, you may use that key.
  6. For the Accept requests from these HTTP referrers option, add your domain. An example for adding anpsthemes.com:


More information: https://developers.google.com/maps/documentation/javascript/get-api-key


Example or an API key:



Once you receive your API Key, inside the WordPress admin dashboard navigate to Appearance - Theme Options (or Plugin Options in newer themes) - Google Maps and input your API key in the input field.


Note: it may take up to 5 minutes for the new options to take effect. We also recommend that you clear your cache or do a hard refresh for your page.


Enabling APIs


Google provides multiple APIs for Google Maps. Each API allows you to access different functionalities for the maps.


Our theme requires the following APIs:

  • Maps Embed API
  • Maps JavaScript API
  • Geocoding API


Navigate to the Google cloud console - Library (https://console.cloud.google.com/apis/library) to enable the APIs. In the top left corner (blue bar) make sure your project is selected before activating the APIs.


Type in maps in the search bar to get all the Google Maps APIs. Make sure all the required APIs are enabled.


List of all the Google Maps APIs


When you click on an API, you will be redirected to the page where you can

enable it


Billing account


Since July 2018, Google Maps require a billing account added in order to use the API. From their site:

As of July 16, 2018, to continue to use the Google Maps Platform APIs, you must enable billing on each of your projects. If you choose not to add a billing account, your maps will be degraded, or other Maps API requests will return an error.

Source: https://developers.google.com/maps/documentation/javascript/usage-and-billing and https://developers.google.com/maps/faq#usage_apis

While a billing account needs to be added, Google is providing a number of free requests which is enough for most of the sites. This means you can still use the Google Maps API for free. Google also allows you to set your own limits inside the dashboard: https://developers.google.com/maps/faq#usage_cap This will allow you to limit the number of requests and avoid unnecessary expenses.


Errors


If the map is still not showing up, check the browser developer tools to see what error is reported.


The error will contain a URL, which you can follow to see exactly why the issue is occurring.


You can also find a full list of the errors here: https://developers.google.com/maps/documentation/javascript/error-messages