Divi Map Module Tutorial

If you have ever wanted to create a custom Google map using the Divi Map Module, I am sure you will have been frustrated by how damn hard it is. But it isn’t the fault of Divi. Google forces website owners to have a Developer Console Account, Active Billing and API keys to display a custom map. Creating the Divi Map Module and applying styles is the easy bit. It is the Developer Console setup which is the tricky bit but it can be done!

I have worked through this disjointed process a few times so I thought I’d write up this Divi Map Module Tutorial to hopefully make things easier for you and me both!

Following this tutorial you will be able to use either the Divi Map Module or create a customised map using Snazzy Maps and the Code Module instead. Good luck.

Google Developer Console

If you really want a custom map for your website you have to go through this process and create a Developer Console Account, Active Billing and API keys to display a custom map.

01 Developer Console Setup

You will need access to a Gmail account associated with the website.

This can be a Gsuite or regular Gmail account.

1. Login to the Gmail account you will use to set up the Map API and Billing.
2. Then go to: https://console.developers.google.com/

Even though Google requires a billing account, you won’t have to pay anything if your map won’t be displayed more than 25 000 times/month.

1. The first thing you need to do is set up a billing account.
2. Click the burger menu top left and select Billing.
3. Add your billing details.

02 Create a new project for your website

1. Click the little arrow top left next the domain name.
2. In the pop up window click NEW PROJECT.
3. Give it a name. Example: My Website Map API Project.
4. Click CREATE.
5. Make sure are in the correct Project by selecting the little black arrow.

03 Enable the API’s you need

1. Click the burger menu top left.
2. APIs & Services / Library
3. Search: Maps
4. Enable the following APIs:
5. Maps JavaScript API – Needed for Divi Map Module and Snazzy Maps.
6. Geocoding API – Needed for Divi Map Module.

You can enable each API by clicking the name.

In the next window click ENABLE.

04 OAuth Consent

1. Click the burger menu top left.
2. Click APIs & Services / OAuth consent screen.
3. Click Internal.
4. In the next window add an Application name. Example: My Website Map OAuth
5. Add the authorised domains.
6. Click Save.

05 Verify Your Domain

1. Click APIs & Services / Domain verification.
2. Add domain.

06 Credentials & API Key

1. Click APIs & Services / Credentials
2. At the top of the screen click + CREATE CREDENTIALS / API key
3. Copy and save your API key. Keep it secret!

1. Click RESTRICT KEY. (If you are going to use Snazzy Maps and the code module do not restrict the key. Just keep the API key secret).
2. Give your API key a name. Example: My Website API Key 01
3. Check HTTP referrers (websites)
4. Below, click ADD AN ITEM
5. Enter your domain like this – ensure you enter your correct domain:  *.yourdomain.com/*
6. Check Restrict key.
7. Select the API’s to restrict.
8. Click Save.

07 Add the API Key to Divi

1. Login to your Divi WordPress website.
2. Click Divi / Theme Options
3. Enter the Google API Key
4. Save Changes.

08 Add the Divi Map Module

1. Edit a Divi page.
2. Add a map module.
3. Be sure to add a map pin and the map centre address in the module settings.

SNAZZY MAPS

If you want even more map control and styling you might want to look at Snazzy Maps.

Now you have all your Google developer stuff sorted we can create a Snazzy Map and use this instead (if you like).

1. Go to https://snazzymaps.com/
2. Create an account by clicking the avatar icon top right.
3. Click EXPLORE STYLES or BUILD A MAP to create a map for your site.
4. Go through the process.
5. To get your map location Latitude and Longitude visit https://www.latlong.net/
6. When you save your map you are prompted to add your API key.
7. Once saved get the iFrame code to use on your website.

When you create a map with Explore Styles it’s possible to remove controls if you want to under the Advance Settings.

1. View the code and copy it.
2. Come back to your website.
3. Add a Divi Code Module.
4. Paste in the code.

If the snazzy map doesn’t show correctly you will need to remove the restrictions under Credentials in the developer console.

Don’t forget that making changes in the Google Developer Console can take up to 5 minutes to take effect.

Good luck!

Resources:

1. https://www.elegantthemes.com/blog/tips-tricks/google-maps-api-key
2. https://www.elegantthemes.com/documentation/divi/map/
3. https://snazzymaps.com/
4. https://churchthemes.com/page-didnt-load-google-maps-correctly/
5. https://www.latlong.net/