Google Maps API Key

Detailed Guide How To Get Google API Key

STEP 1. Go to the Google Cloud Platform Console

An API key is required in order to add a map to your website (you might want to use Divi Map Module). Firstly, to obtain an API key, you need to log into the Google API Console. You’ll be asked to register your application by creating or selecting a new project. Once you are done, press “Continue”.

 

Application on Google Cloud Console
Name the API key

STEP 2.  Name the API key

Next you will be asked to name your project. You can name the project anything you like. You can also input your website’s domain name (add an * in front of it if you allow access from both www.domain.com and domain.com) to make sure to other website’s are allowed to your your API key.

Key restrictions are important fields because it specify which web sites, IP addresses or apps use this key.  The best option is to select HTTP referrers. You can set one restriction type per key.

To continue press “Create”.

STEP 3. Your API key created

After you have created and named your project, you will be presented with an API Key on the credential page.If you haven’t done key restriction part previously, you will be able to do it now.

You may want to restrict access to your API Key to avoid having it “hijacked” and going over your quota. From the dialog displaying the API key, select Restrict key to set a browser restriction on the API key and press the button. 

Google Maps API key created

STEP 4. Copy/paste API key address

Copy paste API key
After you have obtained an API key, you must copy/paste it into the theme options panel. Return to your WordPress site and paste the API Key into the box labeled “Paste your API key here and save” at the top of the page at WordPress Dashboard → Maps. Save it.

STEP 5. Enable required API functions

Now you need to enable the required API functions for your project. Click on the Library link in the API Manager sidebar menu and then go to the Google Maps JavaScript API panel. Now you can see different options for your API key. The most important is Maps JavaScript API.

 

Enable required API functions
The JavaScript API will probably already be enabled by default. If the JavaScript API is not enabled, then click Enable on the Google Maps Javascript API window.

Sometimes Google does not activate all the required APIs and you will have to manually enable these APIs. The following is a quick list of all the APIs that need to be enabled along with your JavaScript API: Google Maps JavaScript API, Google Maps Geocoding API, Google Places API, Google Maps Directions API, Google Maps Distance Matrix API, Google Street View Image API. You just simply need to select one of the options and then press the “enable” button.

Enable required API functions

STEP 6. Overview your API key

If you want to see the API’s in use and other related options you’ve selected, you can simply go to the Overview or API’s sidebar. You can also disable an API for a project at any time.

Important note: if you have not set your billing account, you won’t be able to get the API key. To see the billing details go to Billing. Once you fill out the form and enable billing, you will get up to 28 000 map requests per month and 40 000 direction calls per month, free of charge. You will only be billed when your usage exceeds your monthly $200 credit limit.

Overview API key

How To Add A Map Module To Your Page

Once you have your API key, it’s time to learn how to add a map module to your website

Map Module

Map Module

The Divi Map Module let you embed custom Google Maps anywhere on your page. You can easily share your company location.

Fullwidth Map Module

Fullwidth Map Module

The Fullwidth Map Module is almost the same as the DIVI map module but can be added to fullwidth sections.

Want to explore and learn more?