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!

5 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
  4. Eric Oxenberg

    If you don’t specify an API, Google should authorize all of them. By the article above, this may or may not be so. If you use Google’s global command, */domainname.com/*, Google should authorize the entire site. It doesn’t do that either; I always need to specify the exact page to authorize, with both www and no-www prefixes. I’ve always wondered whether it is the Google API service or the Divi module that’s so stupid, and still haven’t figured it out.

    Reply
  5. Richard Hart

    Awesome very helpful

    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.

Web Design in Scotland: Blending Art and Expertise

In the digital age, a strong online presence is crucial for businesses and individuals. A well-designed website serves as the virtual storefront of the modern world, leaving a lasting impression on visitors. To create an exceptional web presence, one needs the skills...

Affordable Web Design for Small Businesses

In today's digital world, having a professional website is crucial for any small business looking to grow and succeed online. However, many small business owners face a dilemma - limited budgets must align with the high costs of custom web design and development. This...

3 Potential Website Design Flaws Law Firms Should Avoid

The legal industry has been among the slow adopters of digital technologies, but the pandemic emerged as a tech disruptor. Like all other businesses, law firms were forced to adopt remote work and virtual consultations. Tech transformation is essential to stay on top...

Web Design for Blogs: Design Tips to Enhance User Engagement and Readability

When you're jazzing up your blog design, it's all about making it super engaging and a total breeze to read. You want readers to feel like they've stumbled upon a comfy home where they just can't get enough of your awesome content. Picture this: a blog so cozy and...

Top Tips on How To Enhance User Experience Through Accessibility

In today's digital landscape, user experience (UX) plays a critical role in the success of websites and applications. However, creating an exceptional user experience goes beyond aesthetics and functionality. Accessibility, or the ability of all users, including those...

How to Ramp Up Your Website With UX Competitive Analysis

Website design is no longer about sticking to the fundamental rules and following the evolving trends. User experience (UX) design is the secret sauce of success because it ensures that your website replicates the needs and expectations of your target audience. Not...

Tips to Leverage Website Design for Building Brand Credibility

The current American business landscape is hypercompetitive, making it hard for brands and startups to sustain and thrive. Unbelievably, even established brands struggle to retain customers because they have too many options to pick and choose. Credibility can do the...

User-Centric Design Mastery: 4 Innovative Usability Testing Techniques

No matter whether you offer a straightforward gaming product or an intricate enterprise-grade site, users are the be-all and end-all of your product life cycle. An optimal method to make your IT solution favorably accepted by the target audience is to equip it with...

Read more articles about business.

COD Affiliate Network: Expanding Opportunities with TerraLeads

COD Affiliate Network: Expanding Opportunities with TerraLeads

  Affiliate programs are one of the popular ways to earn money online, whether pursued passively or actively. While there are numerous remote job opportunities available online, an increasing number of individuals are opting for traffic affiliate marketing. To...

How to Optimize Your Construction Business for Increased Revenue

How to Optimize Your Construction Business for Increased Revenue

  In today's competitive construction industry, optimizing your business for increased revenue is not just a desire but a necessity. With changing market dynamics and evolving customer expectations, staying ahead requires strategic planning and implementation....

Understanding Digital PR and Its Impact On Your Business

Understanding Digital PR and Its Impact On Your Business

  Small and established businesses significantly benefit from a strong digital PR and marketing strategy. Having a clear and well-laid-out digital public relations strategy is important for businesses. Unfortunately, most businesses refer to business relations...

How To Setup Your Business For Free Organic Lead Generation?

How To Setup Your Business For Free Organic Lead Generation?

  Ever wonder how some businesses seem to attract customers like bees to honey, without spending a dime on advertising? That, my friend, is the magic of free organic lead generation.   It's about getting people to naturally stumble upon your business and be...

Share This