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

Last update: 19 June, 2018
Warning: You must have a Google account with billing enabled to generate a key for Google Maps API.

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.

Table of Contents

Get access to our kick-ass support team with Yoast SEO Premium

Generate a new API key

If you do not have a Maps JavaScript API key or need to create a new one, please follow the steps below. If you already have a Maps JavaScript API key, you can add it to the plugin with the steps here.

  • Go to the Google Maps Platform
  • Click 'Get Started'
  • Check 'Maps', 'Routes' and 'Places'Google Maps > Enable APIs
  • Click 'Continue'
  • If you want to use an existing project, please select it from the list. Otherwise, select 'Create a new project' and enter a project name.
  • Click 'Next' to continue
  • Click 'Next' to enable the APIs for the project
  • Copy the generated API key from the popup, you'll need this to set your key later.

View your existing API keys

  • Go to the Google Maps Platform
  • If the side menu is not visible, click the three line (hamburger) menu icon
  • Click 'APIs & Services' (API icon)
  • Click ' Credentials' (key icon)

Secure your existing API keys

To prevent quota theft, secure your API key following these best practices.

We use the following APIs:

  • Geocoding API
  • Maps JavaScript API

Add API key to Yoast SEO: Local

  • Copy the API key you created from the Google Maps Platform.
  • Log in to your WordPress website. When you're logged in, you will be in your 'Dashboard'. On the left-hand side, you will see a menu. In that menu, click on 'SEO'.
  • The 'SEO' settings will expand providing you additional options. Click on 'Local SEO'.
    Admin >SEO > Local SEO
  • Click on 'API Keys'.
    Admin > SEO > Local SEO > API keys
  • Paste the API key you copied in step 1 into the 'Google Maps API browser key' field.Enter your server key
  • Click Save Changes.

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? ·