Create Google Maps API Key to setup Divi’s Map Module

Hey explorers ! Let’s talk about Maps in Divi. Divi comes with a pretty neat Map Module which works together (behind the scenes) with Google’s powerful Map API. Divi’s Map Module is one of the few modules that needs some external prep work before it works. You need to create a Google Maps API Key & enter it in Divi’s Theme Options. If you don’t do that or the key is incorrect (or wrong setup) the map module will show this:

What’s an API Key ?

Without diving too deep into something we all don’t understand: The API Key (Application Programming Interface Key) often acts as both a unique identifier and a secret token for authentication, and will generally have a set of access rights on the API associated with it, in our case the Google Maps API. (wikipedia)

Step by Step Guide To Create Google Maps API Key and use in Divi

1. Log in into Google Developers Console

Go to https://console.cloud.google.com/home/dashboard and log in using your Google Account. Don’t have a Google Account ? Create one !

2. Create New Project

If you don’t already have a Project, Google probably asks you by default if you want to create a new project. If you already have Project and want to create a new one, take a look at the screenshot below. On the top blue bar click on “choose project” and in the pop up click on the black plus “+” sign.

Go ahead and choose a name for your project. You only need to think of a name, the project ID will have a random generated name. Screenshot (!) :

3. Locate the API Manager

There is a lot to explore so don’t get lost in there. Next we need to locate the API Manager. Click on the white hamburger icon in the top left corner, the click on “API Manager” > “Dashboard”.

Now click on “Activate API” – Blue plus “+” icon – Screenshot (!) :

4. Activate “Google Maps JavaScript API” & “Google Maps Geocoding API”

Once you clicked on “Activate API” in step 3 you will be redirected to the library. Use the search function to look for “Google Maps JavaScript API” & “Google Maps Geocoding API”… found it ? Go ahead and activate both of them. Screenshot (!):

5. Create Credentials / Key

The API is activated. Now what ? Google tells us we need to create Credentials to use this API. Click on “Create Credentials” to proceed.

In the next screen just follow one step ahead ( Google has a really simple way to explain things anyway ) and you will already see your fresh API Key. Copy it ! Screenshot (!) :

 

Never share your API Keys in Public !

Create HTTP Restriction for your API Key

If you don’t want your Key to be used by anyone else you can set up e. g. a HTTP Restriction. If you “whitelist” your domain like *.example.com/*, the API Key will only allow request from your site. Click on “Edit API Key” to enter the settings for your API Key MORE INFORMATION – Screenshot (!) :

 

6. Copy & Paste API Key into Divi

Log into WordPress Dashboard of your site ( Divi installed ) and go to Divi > Theme Options. In the General Settings Tab scroll down a bit . You should see “Google API Key” . Insert your key (Don’t copy any spaces by mistake) and hit save.

All Done !

If you have done everything right ( and I did not make any mistake ) you should start seeing the map in Divi’s Map Module. Like this:

Mozart's Birthplace

Getreidegasse 9
5020 Salzburg