How to generate and set a Google Maps Javascript API (browser) key

Last update: 14 September, 2016

Warning: You must have a Google account to generate a key for Google Maps Javascript API.

Since June 2016, Google Maps requires a special Google Maps browser key. Without this key, you cannot display Google Maps on your website.

Before you can set this browser key in your Yoast SEO: Local installation, you’ll need to generate it. This tutorial will show you how to do that.

  1. Generate a Google Maps browser key
  2. Set your Google Maps browser key

Generate a Google Maps browser key

1.
Go to the Google API Console.
2.
Click ‘Get A Key’.

a.
If you want to use an existing project, please select it from the list.
b.
Otherwise, select ‘Create a new project’ and enter a project name.
3.
Click ‘Enable the API’ (existing projects) or ‘Create and Enable API’ for new projects
4.
Copy the generated browser key from the popup, you’ll need this to set your browser key later.
5.
To prevent quota theft, secure your API key following these best practices.
6.
(Optional) Enable billing. See Usage Limits for more information.

Set your Google Maps browser key

1.
Copy the browser key you generated from the Google Maps API Manager.
2.
Log in on your WordPress Admin and navigate to SEO > Local > API Keys.
Navigate to the API key page in Yoast SEO: Local
3.
Paste the browser key you copied earlier into the ‘Google Maps API browser key (required)’ field.
Set your browser key
4.
Click Save Changes to store your browser key.
5.
You should now be able to use Google Maps on your website.

If you have trouble displaying Google maps on your site, please verify that the Google Maps Javascript API is enabled in the Google Maps API Manager.

Was this article helpful? ·