How to Add Google Maps in Divi Theme (Quick & Easy Ways)

embed google maps, embed google maps divi, embed google maps in divi theme, embedding google maps wordpress

Are you looking to add Google Maps to your Divi theme pages? If yes, you landed on the right spot. In this guide, you will learn how to embed Google Maps in WordPress with easy steps.

Google Maps provides an excellent way of publishing maps, directions, and reviews in WordPress. Moreover, by adding Google Maps, you can increase credibility on your website.

In this article, I will tell you how to achieve this job through various methods like:

  • Embedding using API Key
  • Embedding without using an API key
  • Embedding using plugins

So, let’s discuss each method one by one.

Advantages Of Adding Google Maps to Your Website

Google Maps is a very popular tool that helps you easily show the location of your business, point out important locations, and much more. Today, we are going to talk about why it makes sense to add Google Maps to your website.

Google Maps is by far the most popular mapping tool, and it is integrated with numerous services and businesses. If you want to offer a competitive advantage to your business, adding Google Maps to your website is a great idea.

Not only does it make your business look more professional, but it will also help your website stand out among competitors.

Here are a few advantages of using it on your website:

  • It is one of the easiest and ideal methods to tell your location to your website visitor.
  • It allows you to showcase multiple business locations in one place.
  • It also helps you generate more customers as they can see your address and online review without visiting Google Maps.

How to Embed Google Maps in Divi Theme

Now, let’s see how you can insert Google Maps into your Divi pages. Below, I have listed three methods to do this. Let’s see all methods one by one.

Method 1: Embed Google Maps without API Key

The first method to embed Google Maps in the Divi theme is without using the Google API key. This method is very easy to follow and implement on the website.

It is also a great way if your Divi Map module is not working. Here are simple steps to follow:

Embed a Map
Embed a Map

Step 1: Visit Google Maps and search for the business name or location that you want to showcase on your website and click on the Share button and then select Embed a Map, as shown in the above image.

Copy Embed HTML Code
Copy Embed HTML Code

Step 2: In this step, you will get an embed code that you have to copy by clicking on the Copy HTML option, as shown in the above image. Here, you can also change the size of your map to small, medium, large, or any custom size.

Insert Code Module
Insert Code Module

Step 3: Visit your WordPress dashboard and create or open any existing post or page. Next, under Insert Module, search for Code and click on it.

Paste Google Maps Embed Code
Paste Google Maps Embed Code

Step 4: In this last step, paste the embedded HTML code in the given box and save the changes by clicking on the green tick mark, as shown in the above image.

Google Maps Added
Google Maps Added

Now, you can see the Google Map live on your website, as shown below.

Method 2: Embed Google Maps with API Key

In this method, we will use Google API to embed Google Maps on our website. In this method, you get a few more features as compared to the above method, like displaying street view, routes, and dynamic maps.

Here are easy-to-use steps:

Enable Google Maps API Key
Enable Google Maps API Key

Step 1: The first step is to generate your Google API (if you don’t have one yet). For this, visit Google Developers Console and log in with your Gmail ID. After login in, you will see a screen similar to the above image.

Create New API Key
Create New API Key

Step 2: Now, just follow the steps, and at the final step, click on Create New API Key option.

Copy API Key
Copy API Key

Step 3: After completing step 2, you will see an API key that you have to copy to your clipboard.

Enter Google API Key to Your Website
Enter Google API Key to Your Website

Step 4: Next, go to your WordPress dashboard and navigate to Divi > Theme Options and paste the API key to the Google API Key section, as shown in the above image.

Insert Maps Module
Insert Maps Module

Step 5: In this step, create or open any existing post or page and under Insert Module, search for Map and click on it to add it to your page.

Enter Address
Enter Address

Step 6: You need to enter the business name or location that you would like to showcase on your page and click on the Find button. After that, just save the changes, and the location will be shown on your website.

Method 3: Use Google Map Plugins

You can also use plugins to embed Google Maps in Divi theme pages. This is great to insert Google Maps in website pages as you will get tons of additional features and controls over the Maps.

WP Go Maps
WP Go Maps

There are tons of plugins available to do this job, but I highly recommend using WP Google Maps as it is free and also trusted by more than 400k WordPress users.

Here are the top features of WP Google Maps:

  • You can choose between Google Maps or Open Layers.
  • You can create unlimited map markers on your website.
  • It offers 9 beautiful map themes you can choose from.
  • It also supports Google Maps Street View.
  • This plugin offers four Google map types, including roadmap, terrain, satellite, and hybrid.
  • You can also add animations to your map markers.
  • WP Google Maps is fully capable with WordPress caching plugins.

Final Words

We hope you enjoyed this guide on how to add a Google Map in WordPress. Adding a Google Map in WordPress can make it easier for you to interact with your audience.

If you have any questions about adding Google Maps in WordPress, please comment below.

Avatar of Sunny Kumar
Sunny Kumar
Hello! I’m Sunny Kumar from New Delhi, India, a tech enthusiast and blogger with an IT degree from IIT-D. My expertise lies in SEO, Cloud Computing, Telecom & Networking, and CEH. I specialize in SEO, WordPress Development, and PC Building. And being a proficient WordPress user, I’m dedicated to delivering quality content and a remarkable user experience.

2 thoughts on “How to Add Google Maps in Divi Theme (Quick & Easy Ways)”

  1. This is a comprehensive guide on embedding Google Maps in WordPress, which helps users easily find business locations. The step-by-step tutorial certainly makes the process easier, even for beginners. Great work!

    Reply
  2. Thanks for this comprehensive guide on embedding Google Maps in Divi Theme. The methods described are very straightforward and easy to understand. This should help many beginners looking to utilize Google Maps on their WordPress site.

    Reply

Leave a Comment