As of June 2016, Google Maps no longer support keyless access and requires an API Key to work.  If you have built your website before June 22, your site has been grandfathered and will still work without an API key. There is no defined deadline for those who do not use keyed access, but Google encourages customers to use an API key. We also recommend you to add an API key as soon as possible, as we have noticed that even updates to your site may remove you from the grandfathered sites list.

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 for Google Maps

  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:
    • *.anpsthemes.com*
    • http://anpsthemes.com/*

You may also need to enable the Google Maps APIs. Inside the Google API console navigate to Library and under Google Maps APIs enable Google Maps JavaScript API and Google Maps Embed API.

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

Example or an API key:


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.

Adding the API key to our theme

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.

Troubleshooting

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 errors here: https://developers.google.com/maps/documentation/javascript/error-messages