How To Add Google Map In Divi Theme? (With And Without API Key) in 2023

Posted on the 18 August 2023 by Jitendra Vaswani @JitendraBlogger

Do you want to add an interactive Google Map on your Divi theme website? It’s easier than you think! As someone who has built dozens of websites using the popular Divi WordPress theme, I know how important it is to have a visually-appealing and functional site.

One way to do this is by adding a Google Map that can be used for directions or just as a fun visual element. In this blog post, I will discuss two ways for adding Google Maps in Divi – with API key and without API key – so that you can quickly and easily incorporate maps into your website.

Inserting a Map into Divi made easy with an API Key

credits: pixabay.com

To insert a map into a Divi module using an API key, follow these step-by-step instructions:

  1. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="1">First, acquire an API key from the Google Cloud Console. Navigate to the Google Cloud Console, create a new project, then enable the Maps JavaScript API for your project. Once enabled, generate your API key.
  2. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="2">Next, navigate to your WordPress Dashboard. From there, go to “Divi” > “Theme Options.”
  3. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="3">Scroll down until you find “Google API Key,” and input your API key from Google Cloud Console into this field. Save your changes.
  4. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="4">Now, to insert the map into your Divi page, start editing the page and add a new module by clicking “+ Add New Item.” Then, choose “Map” from the list of modules.
  5. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="5">In the “Content” tab in the Map Settings, click “+ Add New Item” to add a new pin to your map. Here, you can enter the title and address for the pin.
  6. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="6">Adjust other settings like zoom level, display map controls, and more in the “Design” tab to customize your map.
  7. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="7">Once you’re happy with your settings, click “Save” and then “Exit Visual Builder” to finish.

Now you have successfully inserted a Google Map into your Divi page using an API key!

Inserting a Map into Divi made easy without an API Key

Embedding Google Maps on your Divi site can enhance its functionality and help visitors locate your business more easily. Here’s a simple step-by-step process to add a Google Map to your Divi site without the need for an API key:

  1. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="1">Open Google Maps in your web browser.
  2. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="2">Enter your business location into the search bar and click ‘Search’.
  3. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="3">Once your location appears, click on the ‘Share’ button.
  4. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="4">In the popup that appears, select the ‘Embed map’ tab.
  5. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="5">Choose the size of the map you wish to embed from the dropdown menu. Then, copy the provided HTML code.
  6. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="6">Now, go back to your Divi site and navigate to the page where you want to insert the map.
  7. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="7">Click on ‘Enable Visual Builder’, then add a new module by clicking on the gray plus button.
  8. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="8">In the ‘Add New Module’ popup, select the ‘Code’ module.
  9. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="9">Paste the HTML code that you copied from Google Maps into the ‘Code’ content area.
  10. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="10">Finally, click ‘Save’ or ‘Publish’.

You have now successfully added a Google Map to your Divi site without an API key.

Benefits of Adding Maps to Your Divi Site:

  1. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="1">User Convenience: Google Maps integrated into your business site allows users to quickly locate your business, saving them time and effort.
  2. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="2">Accessibility: Enables potential customers to get directions to your location from anywhere, increasing your accessibility.
  3. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="3">Credibility: Showcasing your physical location adds credibility to your business, establishing trust among visitors.
  4. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="4">Local SEO: A Google Map embedded on your site boosts local SEO, making your business more visible to local searchers.
  5. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="5">Enhanced User Experience: Providing visually-based location information enhances the user experience, keeping users on your site longer.
  6. ol]:!pt-0 [&>ol]:!pb-0 [&>ul]:!pt-0 [&>ul]:!pb-0" value="6">Business Insights: Google Maps provides insights on how customers are finding your business, which can help refine marketing strategies.

Additional way to Add Maps

If the methods discussed earlier do not fit your needs, there is an alternate solution to add Google Maps to your Divi site. You can utilize active WordPress plugins, such as WP Google Maps or MapPress.

These plugins are user-friendly and efficient, allowing you to embed a map in just a few clicks. They provide customizable features and options to tailor the map to your site’s aesthetics, thereby enhancing the user experience on your website.

Quick Links:

Final Thoughts on How To Add Google Map In Divi Theme? in 2023

All in all, I hope this blog post helped you learn how to add a Google map in the Divi Theme. As you can see it’s actually quite straightforward. With the built-in module, you just have to enter your address and the job is done.

If you do need an API key, it won’t take too long to create one as long as you follow the steps i have described above.

Feel free to reach out if you have questions about adding a Google Map in Divi or any other functionality issues with Divi or WordPress.

I’m always here to help! In addition, I also offer web design services, so let me know if there’s ever a project that I can lend my expertise on. Until then, happy mapping!