Among the famous ways of integrating the Google maps and get it working properly on your website, we can mainly mention the manual embed of the map using HTML iframe element as we have shown in our previous guide about How to add Google maps in Divi builder.
the second option is connecting our website to the Google cloud platform then use the API which is the one that most users complain about and have issues with configuring on their websites.
As long as you have landed on this blog post you probably having an issue of Divi Google maps not working or connected but not loading properly on your website. Don't worry! that's not a big deal because in today's guide we're going to learn how to set up the Google API correctly as well as some suggested solutions that you can implement in case the Divi maps module is not working. sounds good?
Let's stop talking and get started right away (:
Contents
Resolve Divi Google Maps Not Working [Guide]
Here we are in the actual step by step process where we'll walk you through connecting your Divi website to the Google cloud platform and set up an API key then troubleshoot the issues that might appear Moreover, we're going to suggest some other ways to configure the Google maps on your website and avoid the Divi Google maps not working issue forever.
The “page can't load Maps correctly” is the major issue that you'll probably face during the installation.
Let's continue to the details.
1 – Troubleshoot Google Maps API Not working in Divi
Before, saying that you're running into a real problem you need to check whether you have configured and connected the API correctly to your website as in most cases users who have complained about the issues didn't actually do the Google maps integration properly.
To connect the Google maps API to your Divi website follow these simple steps:
First of all, Go to Google cloud platform website then click “Create new project”
Give a name for your project, I personally prefer to give it the name of my website or the client's one for easy reference. Then connect it to your billing account.
Keep in mind that you're allowed to run two different projects with a single Google billing account so if you're a web designer or developer building websites for clients you might need to have a separate billing account for each client.
I mentioned this point because having an incorrect billing account can cause the Google maps module not to display properly on your website.
Click the “Create” button
Open the left-hand side menu and underneath “APIs & Services” choose “Library”.
In order to integrate Google maps properly using the Divi Map module you need to have two different APIs enabled: the first one is the “Geocoding API” and the second is the “Maps JavaScript API“.
This point is very crucial and it's by far the most common one that causes the issues of the Divi Google maps not working or not displaying correctly. In most cases, web designers enable the Maps Javascript API but they forget about the Geocoding API which eventually leads them into trouble.
So go ahead, click on the Geocoding API and click the “Enable” button underneath.
Go back by clicking the small arrow in the top left and do the same process to enable the Maps JavaScript API.
Now that we have enabled the two required options. we'll move on to generate the actual API key by hovering again over the “APIs & Services” then clicking the “Credentials” option.
Once you're in the credentials section click “+ Create credentials” then “API key”.
A window will pop up with your Google map API key, click the little copy symbol in the corner of the field to copy it to the clipboard. For safety purposes, you can also restrict the API key to avoid the possibility of it being stolen and used by someone else.
For your web design clients you can simply restrict it to exactly match the website address.
By doing the previous step, we're ready to add the API key to our website so head over to the WordPress admin dashboard, from the left-hand side menu, navigate to Divi > Theme options, scroll down, and paste the API key in the Google API key field as shown below.
The final step is to scroll up and click the “Save Changes” button in the top left corner of the settings panel.
Congratulations! you have added the Google maps to your website via API key.
2 – Troubleshoot Divi Maps module Not working
Let's suppose you've done all the steps explained above but the Divi Google maps not working issue is still displaying. In this case, I will recommend that you go ahead and clear the caching then try to refresh the page where you added the map.
The second thing, right-click on the page and choose “Inspect” or from your keyboard click F12, this will open the Chrome developer tools.
what you'll simply do is to check the warnings that are appearing in the console window, if there is something wrong with the API key it or your Google account then it will be automatically displayed.
In the example below I got an error message saying that I should enable billing on the Google cloud project. I intentionally did that just to show you what kind of warnings can appear. Once you know the source of the issue you'll go ahead and fix and the maps should be working fine.
If none of those solutions has worked in your situation then you can try one of the methods that can be set up on your website without API keys such as embedding them directly into your website or having them as an image. those ways we'll save you from frustration.
To see the step by step process, check our guide about Adding Google maps to Divi without Google API.
Further Reading:
- Fix Divi Builder Timeout Issue On WordPress
- Divi Jumping Header: How to Easily Fix it?
- Divi visual builder Not Working? (Quick Fixes Guide)
Roundup
In a word, the Divi Google maps not working issue is pretty common, it mainly happens for the misconfiguration done by users themselves and some times problems just happen due to conflicts with some plugins or in the code.
You can follow the steps we have mentioned in the first step to resolve the problem of the Google API or alternatively, use one of the other methods that don't require you to install any API which will make your life a lot easier and save you hours and hours of research trying to troubleshoot the issues.
I hope you have got any value from this article, if you still have any questions in mind about integrating the Google maps then feel free to drop them in the comment section below and we'll discuss them together. Otherwise, I wish you Good Luck (:
Cheers!
