How to Generate a Google Maps API Key

If you're having trouble generating coordinates for a Google Map in our layout builder, or you can't get your map to display on the frontend of your website, you're in the right place.

Google has announced that any websites connecting to Google Maps API after June 22, 2016, for the first time, will require an API key.

Building for Scale: Updates to Google Maps APIs Standard Plan

In your Theme Blvd theme (with framework 2.6.1+), you'll find an option to input your Google Maps API key at Appearance > Theme Options > Configuration > Google Maps. You'll need this API key to display maps from Google on your website.

Now, let's go from start to finish, and take you through generating your Google Maps API key and inputting into your theme options.

  1. While logged into your Google account, go here and click the button, "Get a Key."

  2. A modal window will then pop up on the screen. In the select box that appears, you can create a new project for this API key. We recommend creating a project for this specific website you plan to use the API key on. You can also select from previous projects, if you've made any in the past. 

  3. Once you've typed a name for your project, click the button, "Create and Enable API" and give it a minute to load.

  4. And then if everything was successful, you should see your new API key presented to you. Copy your API key.

  5. We strongly suggest limiting the sites your API can be used on, as your API key is publicly accessible to anyone who views the source of your website in their browser. Google Maps API only allows for so much usage; so you don't want anyone else using your API key that shouldn't be.

    So click the link, "API Console."

  6. You should be taken directly to edit the API key you just created. Next, configure the settings. For example, the screenshot below shows how to to limit the API key to only be used from the domain, mysite.com.

  7. Now, back at your WordPress site with your Theme Blvd theme, go to Appearance > Theme Options > Configuration > Google Maps, paste in the API key, and save your theme options page.

Note: If things aren't working instantly, make sure to allow 5-10 minutes for your new Google API key to be active.