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!

3 Comments

  1. Rus

    Thank you! it worked!

    Reply
  2. Sarah Austin

    Thanks VERY much, finally got to the bottom of the maps mystery! I really appreciate this post

    Reply
  3. Ruth

    What a great guide, thank you. Clear instructions. I’d been going round in circles on this one!

    Reply

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.

Finding The Right Web Developer For Your Project: Pros And Cons

As much as we might all like to believe that we can get almost anything done on our own, this cannot be said for many projects in the tech space. One of such projects in web development. According to Wikipedia, web development is the work involved in developing a Web...

How UX Design Adds Value To Your Business

Your main goal when doing business must be to make it valuable and increase your profits. This is possible if you have superb user experience (UX) design. This encompasses a website's user interface (UI), navigation, and ease of transaction. With a good UX design, you...

How to Build Sites Effectively in WordPress

Many users describe WordPress as an imperfect web development platform especially when they work with clients. And they are not completely wrong. So you need some strategies if you are building a site in WordPress that your clients will love. The following approaches...

Understanding Crucial Parameters to Consider While Opting for Web Development

In this highly competitive digital era, your business without a website is like a rudderless ship. Over the last few years, thanks to the Internet, we have witnessed a technological revolution. Your organization has no identity without a website. Remember that a...

How Your Business Can Benefit from Hiring a Professional Web Developer

When you decide to create a website for your business, you will have to choose between doing it yourself through your in-house IT and design departments and hiring a professional web developer to help you out. To make the right decision, you should think about how...

The 6 Elements to a Good Website Design

Website design is like a good cake recipe. Not all have the same taste, but a good website stands out from the rest. A good website design can help your business to succeed online. A bad design can cause it to look unprofessional, have low conversion rates for sales...

Website Design 101: 4 Things To Consider

Creating a website is a big business, as well as a seemingly daunting task. Regardless if you’re a web developer or designer, or just someone who wants to get online exposure with little experience, web design planning will make the process a lot easier. In this...

The version of Angular: What is New in Latest Angular

Hello everybody! Today I would like to talk about the latest version of Angular, to discuss what has appeared in it and how it will affect the development of projects.   The Latest Version of Angular Angular 10 was released on the 25th of June and it’s just a...

Read more articles about business.

How To Make Sure Your Business Is Safe No Matter The Branch

How To Make Sure Your Business Is Safe No Matter The Branch

A successful business might be considered the most valuable asset one can possess. Not only because a business can have a lot of capital invested in it, such as machines or offices, but because it has a developed product or service, and a secured place on the market....

How to Make Your Office Space the Perfect Productive Environment

How to Make Your Office Space the Perfect Productive Environment

You might wonder “how can I make my office space more productive?” Many factors impact how much work the average small business owner completes in a day. Eliminating distractions and adding motivation helps you get the most from the hours you put into your job....

6 Tips on How to Keep Your Office Clean

6 Tips on How to Keep Your Office Clean

Any and all spaces where people spend a lot of their time should be clean. Period. Public spaces, homes, vehicles, but also working quarters such as offices. Cleanliness has a lot to do not only with maintaining our health but also with how we feel mentally and...

4 Solid Onboarding Tips Every Manager Should Know

4 Solid Onboarding Tips Every Manager Should Know

One of the greatest resources of any company is its workforce. For this reason, companies must hire and retain the best talent. Hiring new talent is a considerable investment for any company. The hiring cost can go up to $100k due to training and mentorship....

Share This