How To Add Google Map In Divi Theme? (With and Without API key)

Adding Google Maps to a Divi website is one of the easiest ways to improve user experience, especially for business websites, local service providers, agencies, restaurants, and portfolio sites.

I’ve worked with the Divi Theme for years while building landing pages, contact pages, and local business websites for clients.

One issue I repeatedly noticed is that many Divi users struggle with the Google Maps setup process, particularly API key errors, blank maps, billing configuration problems, and responsive design issues.

In this guide, I’ll show you how to add Google Maps in Divi using multiple methods, including:

• Divi Map Module
• Google Maps iframe embed
• Google Maps API setup
• Troubleshooting common Divi map errors

I’ll also explain when you should use the Divi Map Module instead of a simple embedded Google Map and how Google Maps can help improve local SEO for business websites.

Method 1 – How To Insert A Map Into Divi? (Using API key)

Step 1: Go to the WordPress Dashboard section. If the Divi theme is already installed, you can directly navigate to Divi. Others may buy through Divi Discount and save money.

If not, download it before proceeding with this method. Then click the Theme Options section. If you scroll down, you can find the section Google API Key.       

A Question mark symbol would have been provided beside the API key. Click on that Question Mark. The pop-up will give an insight into how the Google API key can be obtained. Click on the link provided.

The link will redirect you to the Elegant Themes official documentation area. Here, another link, that is, the Google Developers Console Link, is provided. Click on that.

It will be redirected to the Google Cloud Platform area. You must follow three steps to get a new API key there. 

Under Confirm Project, give Next. Go to Enable APIs, give Enable. Then get the API key. 

Once you get the key, go back to Divi Theme Options and paste the respective code in the Google API Key section. Click the Save button.

The next step is adding the Google Map. You can embed a Google Map in any existing page or a new page. This method has been further proceeded by creating a new page for your convenience.

Click Add New page. Give a suitable title, then click the Use Divi Builder button.

Now, three options will be displayed. From that, choose Build From Scratch. After that, choose a single column. Then search for the Map module and add it.

Now go to Map Settings. Under Map Center Address, the correct address should be given in that field. That’s all.

Note: This method isn’t for many people worldwide. I have heard several complaints like Divi Google Maps not working, and Divi Map not showing.

Here’s why this API key method isn’t working for some Divi users!

Enable Billing – This is the step many tutorials skip!

Even though Google Maps includes a free usage limit, Google still requires a billing account to activate the Maps Platform APIs. Without billing enabled, Divi maps may show:

• REQUEST_DENIED error
• grey map
• blank map issue
• For development purposes only

So, you have to add Your Business Location! Inside the Divi Map Module:

• Add a new pin
• Enter your business address
• Customize title and description
• Adjust zoom level

You can also disable mouse wheel zoom, change admin labels, and customize design settings. Once saved, the Google Map will appear directly inside your Divi layout.

If you have any difficulties, use the alternate method – adding Google Maps without an API Key.

Method 2 – How To Add Google Maps to Divi site? (No API key)

This method is very easy to implement! If your Divi theme Map Module is not working or don’t want to use the API method, you may follow this simple way.

I often use this iframe embed method for small brochure websites where clients only need a simple location display without interactive features.

Step 1: Go to Google Maps and enter your desired location. Click Share, then click Embed A Map.

Step 2: A link will be available. Give Copy HTML.

Step 3: Go to an existing page or a new page on your website. Select Build From Scratch. Here, instead of the Map module, search for the Code module and insert it.

Step 4: Paste the copied code into that module. After pasting the code, find ‘Width’ and give it as 100%. Save all the changes and visit your website. The map was added successfully.

No API Key is required for this method.

So, you have successfully inserted the Google map in your website built with the best WordPress theme builder, Divi. 

Video Tutorial To Embed Google Map in Divi

If the above step-by-step tutorial on using Google Maps in the Divi theme, here is a clear video explanation for executing it! 

Divi Map Module vs Embedded Google Maps

Here’s the practical difference based on my experience working with Divi websites.

• If you only need a basic map, iframe embed is enough.
• If you want better styling, multiple locations, full Divi integration, and scalable business pages, then the Divi Map Module is the better choice.

Method 3 – Add Google Maps In Divi Site Using a Plugin

If you are not comfortable with any of the above-discussed ways, you may use the active WordPress plugin like WP Go Maps or MapPress to get the job done in just a minute! 

How To Fix Divi Google Maps Not Working?

One of the most common complaints from Divi users is: “My Google Map is blank.” I’ve encountered this issue multiple times while troubleshooting client websites. Usually, the problem comes from API configuration errors.

Here are the common causes of Google Maps not working in Divi.

Billing Not Enabled – Google Maps APIs require billing activation.

Wrong API Restrictions – Sometimes the API key is restricted incorrectly.
Try this:
removing restrictions temporarily
testing again
Then, applying domain restrictions carefully

Missing APIs – Both APIs should be enabled (Maps JavaScript API & Geocoding API)

Cached Files – Clear WordPress cache, CDN cache, browser cache. Divi static CSS generation can occasionally delay updates.

Invalid Domain Setup – If your domain recently changed: regenerate API restrictions and update allowed referrers.

Advantages Of Adding Google Maps to Business Site

So far, you have learned the easy ways to create Google Maps on your Divi website, and here are the benefits of adding your location to your web asset.

• Supports local SEO, which helps to get massive traffic from search engines.
• Ideal way to share your location with the targeted audience. 
• Improves your credibility, and hence your customers gain trust in your business 

Frequently Asked Questions

Wrapping Up

If your business has a physical location, you should add its address to your website as it will help your customers reach you easily. It also enhances your trustworthiness. 

Adding Google Maps in Divi is straightforward once the API setup is configured correctly. For simple sites, I usually recommend the iframe embed method because it avoids unnecessary API complications

But for professional business websites, the Divi Map Module provides better customization, responsiveness, and integration with the Divi Builder.

After working with Divi across multiple client projects, I’ve found that most Google Maps issues come from incomplete Google Cloud configuration rather than Divi itself. Reach out to me for any assistance.

Other Divi Theme Tutorials

Remove Sidebar In Divi Theme

Edit Footer In Divi Theme

Add YouTube Background In Divi