Embedding a Google Maps requires a “Google Maps Javascript API Key”. This article will tell you exactly how to do that.

Watch or Read?

Watch the whole process from start to finish with this video screencast, or skip below to read through it.

Google announced on June 22, 2016 that all embbeded Google Maps must use an API Key.

In order to embed a Google Map on your website, you’ll need to integrate a “Google Maps Javascript API Key” into your site. This is done through the Google Console and by pasting the API key into our Maps Builder.

Navigating the Google Console

The Google Console is a central hub from which you can access and create any of the 100+ APIs and API keys that Google makes available. You can access the Google Console here: https://console.cloud.google.com (NOTE: A Google account is required)

The Google Console Dashboard
The Google Console Dashboard

Once you are logged in, you’ll need to create a “Project”. Do that by clicking on the down arrow to the left of your Profile Picture in the top right of the browser window. You’ll see a dropdown. From there click on “Create Project”.

Animation showing how to create a new Project in Google Console.
Animation showing how to create a new Project in Google Console.

Name your project something that relates directly to the purpose of this API Key, then click on “Create.” The process will take a few minutes to finalize.

The "Use Google APIs" tile in the Google Console
The “Use Google APIs” tile in the Google Console

Once the Project is created, you’ll see a Dashboard with several “tiles”. One of them says “Use Google APIs”. Click on the link that says “Enable and Manage APIs”.

Now you’ll see a categorized list of all the available Google API keys. At the top of that list is a search box. In the search box, search for “Javascript”, then click on “Google Maps Javascript API“.

After the page refreshes, click on “Enable”.

Repeat this step to enable the Google Places API Web Service API. Search for “Places” and click on “Google Places API Web Service”. Click “Enable” to enable the API.

Which APIs Should I Enable?

Two APIs are required for all maps:

  1. Google Places API Web Service
  2. Google Maps Javascript API
Enable the Places and Maps APIs
Enable the Places and Maps APIs

You’ll see a notice informing you that you’ll have to create “Credentials” in order to use this API. Click on the “Go to Credentials” button to do that.

The "Go to Credentials" button in the Google Console
The “Go to Credentials” button in the Google Console

From there you’ll go through a 3-step process to generate your Credentials. In Step 1, the first option should be chosen for you. It should say “Google Maps Javascript API”.

The second option you’ll want to set to “Web Browser (Javascript)”.

Next it will ask you to name the Credentials, and for your “HTTP referrer”. You can name it whatever you like, and the “HTTP referrer” is optional. It is a good practice for security reasons, but you might want to start testing without it first. If you want to use it, make sure you enter your domain name as follows:

Enter your HTTP Referrer

*.example.com/*

Click the code to select all

After you click “Create” you’ll be presented with your API Key.

Optionally, there’s a couple more APIs you can enable for different features of Maps Builder:

  • The “Google Maps Directions API” is required to use the Directions feature
  • The “Google Maps Geocoding API” is required to use the Geocoding feature.
    NOTE: A valid SSL certificate and forcing your url to load only on HTTPS is also required to use the Geocoding feature.

Now the Easy Part!

Now, all you need to do is copy that API key, and paste it into our Maps Builder settings. You’ll find them under “Google Maps > Settings” and the “General Options” tab.

Enter your API key into the Maps Builder Settings here.
Enter your API key into the Maps Builder Settings here.