Divi Maps Not Working with API Issues [SOLVED]

business clock icon
Created November 21, 2020

Are you having trouble getting your Google Maps module on Divi to display properly?

If you are building a website with the popular Divi theme, then you might have come across a maps module that looks like this.

This could flash when you first try and add a Google Maps module or when you upload a premade template from the Divi library. Being able to properly display the maps module takes an API key from Google Cloud Console and requires a billing profile and a few extra steps.

Unfortunately, (and in my most humble opinion) Google Cloud Console is clunky and difficult to navigate, and understanding the proper way to connect it with Divi can lead to confusion. Hopefully, these steps can help you avoid the long hours of frustration of something that should have been super simple.

 

How to Connect Google Cloud Console to Divi Google Maps

Here are the steps required to display the Google Maps module correctly and some common mistakes you might run into along the way.

 

Step 1: Create a new project on Google Cloud Platform

The first thing you want to do is head over to Google Cloud Platform and create a new project.

google cloud console project

Name your project and connect it to your Google billing account.

**Important Note – While most small business websites will not incur any charges from Google, it is still required to include billing information for each profile and you are only allowed to have 2 projects running on a single billing profile. If you are working with many clients that use Google Maps on their website, you might need to set up a different billing account for each client. **

One common error that many people run into when the maps module is not displaying properly has to do with an incorrect billing setup. Remember, a single billing account can only be used for two projects.

 

Step 2: Create APIs Required for the Divi Maps Module

Open the main menu for the Google Cloud Platform and hover over “APIs & Services” and click on “Library”.

library google cloud

**Note – This next step is important and usually is the most common issue with the maps module not displaying correctly. **

You will need to enable 2 different APIs for the Divi Maps Module to display correctly.

  1. Maps JavaScript API
  2. Geocoding API

Often, Divi builders will simply enable the Maps JavaScript API (Maps for your Website) and will not know they need to enable the Geocoding API as well.

 geocoding api example

Once you have enabled both the Maps JavaScript API and the Geocoding API, it is time to gather credentials to plug into the Divi theme.

 

Step 3: Create Credentials to use Google APIs on Divi

Next, head back to the main menu of Google Cloud Platform, hover over “APIs & Services” and click on “Credentials”.

credentials Google Api

On the credentials page, click on “+ Create Credentials” located at the top of the page and then clock on “API key” to create your new API key.

API key created

Now you have your API key that is ready to plug into the Divi theme.

 

(Optional) Step 4: Restrict API Key

You have the additional option to restrict the API key to specific rules to eliminate the possibility of someone stealing your credentials and using it in a different area on the web (and charging your billing account for it).

You can restrict the key by specific APIs, IP addresses, or web sites. For our clients, we will simply restrict the key to match the exact website address.

 

Step 5: Add the API key to the Divi Theme

In this final step, you will add the API key to the Divi theme to be used throughout the website. In the backend of your WordPress build, click on Divi and “Theme Options” in the left side menu. Under the General tab of the Divi Theme Options is an option to add a Google API Key. Copy the API key you created and paste it here and then click “Save”.

 divi theme example

Finally, refresh the current page displaying the map and voila! You now have a working Divi Maps module.

 

Divi Maps Module Still Not Displaying Correctly?

If the maps module is still not displaying correctly, right-click on the page and click “Inspect” to view the page source code. From here, click on “Console” to display JavaScript loaded on the page and if there is something wrong with the Maps module, it will be displayed here and will give you the information you need to move forward.

 JavaScript console

We know just how frustrating it can be when there is a technical problem when building a website. We hope that this guide was able to eliminate one of those headaches to get you back on the creative process.

Good luck!

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Is Your Business Being Found Online?

Laptop Metrics Colorado

Free Digital Marketing Report ($150 Value)

marketing module lineWant to know how your business stacks up against the competition?

Read more articles about Web Design.

Divi Maps Not Working with API Issues [SOLVED]

Divi Maps Not Working with API Issues [SOLVED] Created November 21, 2020 Are you having trouble getting your Google Maps module on Divi to display properly? If you are building a website with the popular Divi theme, then you might have come across a maps module that...

How To Choose The Best Web Design Company

How To Choose The Best Web Design Company Created May 2, 2020 When you have a small list of five or seven web design agencies that meet your basic criteria, you should contact them, request proposals, and carefully select the one that fits perfectly with you.  ...

14 Design Tips For Successful Websites

14 Design Tips For Successful Websites Created March 19th, 2020 When it comes to design for websites, the first thing that comes to mind is the look of the web page, that is, if the site is “beautiful”. But website design goes far beyond appearance: today, it is a...

6 Ways To Mix Up Your Website Design In A Week

6 Ways To Mix Up Your Website Design In A Week Created April 8th, 2019 The online landscape moves quickly, as do web design standards. Not only will the same old design get boring eventually, but it will also start to show its age compared to the competition. That’s...

Where do I start if I need a website?

Guide to Building a Website for your New Business by Tyler Rice Created Nov. 6th, 2018 You’ve been planning for months (or heck… even years) to get your small business started and it’s time for you to build a website.   But where do you even start? We know how...

Export Reviews from Etsy to WordPress 2020

Exporting Customer Reviews from Etsy to WordPress (2020) by Tyler Rice Last updated August 6, 2020   So, you are looking to move your online business from Etsy over to a platform such as WordPress. And you know just how important it is to move the customer...

URL Optimization & Navigational Structure

Best URL Optimization & Navigational Structure for SEO by Tyler Rice Date created | Mar. 13, 2018 What exactly is a URL? A URL is the text and file structure that makes up a webpage’s path. This is the human-readable path that is created to replace the IP address...

8 Tips for Selecting a Domain Name

8 Tips for Selecting a Domain Name by Tyler Rice Last updated July 1, 2017 We know that finding the perfect domain is no easy task for your business. We believe that the correct domain and brand is an essential step towards the creation of your website so we decided...

Read more articles about business.

7 Advantages of Cloud Storage for Your Business

7 Advantages of Cloud Storage for Your Business

7 Advantages of Cloud Storage for Your Business Created November 30, 2020 Cloud storage and providers of cloud-based solutions are reshaping businesses big and small alike. Using cloud storage these days has moved beyond personal use and has become one of those...

Effective Ways to Reduce Startup Costs

Effective Ways to Reduce Startup Costs

Effective Ways to Reduce Startup Costs Created November 30, 2020 Studies found that 24% of startups fail due to the lack of money, while 13% of them struggle to get financing. The truth is that most startups do not have an angel investor to financially support them....

6 Things You Should Know About Running a Business in Florida

6 Things You Should Know About Running a Business in Florida

6 Things You Should Know About Running a Business in Florida Created November 28, 2020 The sunshine state, more commonly known as Florida, is a palace where people find themselves flocking to in the winter. It is hard to argue against why people flock to this tropical...

How Video Production is changing in 2021

How Video Production is changing in 2021

How Video Production is changing in 2021 Created November 21, 2020 Ever since the COVID-19 pandemic began, humankind has been making numerous changes to their daily lives. These changes include small things like how they do their grocery shopping, how they interact...

How to Deliver World-Class Customer Experiences in 2021

How to Deliver World-Class Customer Experiences in 2021

How to Deliver World-Class Customer Experiences in 2021 Created November 18, 2020 Nowadays, customer experience has become one of the most important factors when it comes to business success. The main reason this is happening is that the online market became...

Writing an Argumentative Essay – Helpful Tips

Writing an Argumentative Essay – Helpful Tips

Writing an Argumentative Essay - Helpful Tips Created October 19, 2020 The ability to write a well-structured and logically coherent essay is useful for everyone. Well-founded ones comprise arguments that support the main idea and convince the readers of its...

Share This