6.9e Embed a Google Map in Divi Without an API Key

Getting the “This page can’t load Google Maps correctly. Do you own this website?” error message when you try to embed a map from Google Maps with the Divi Map Module? Don’t worry, there is a much more easy way to do it – without using any API keys or credit cards. In this video, I’ll show you how to embed a Google Map in Divi without an API key.

Let’s seamlessly embed a Google map on our Divi website without the need for a Google account, credit card information, or a Google API. We’ll also add hover effects for the map. Here’s how to achieve this:

1. Begin by returning to your development site and adding a new section. Click on the blue plus sign and select a regular section.

2. Create a single-row layout with a single column within this section.

3. Instead of using Divi’s map module, we will utilize a code module to embed the map easily and efficiently. Click the plus sign to add a code module.

4. Go to Google Maps and search for the location you want to display. Once you’ve found it, click the “Share” button and go to the “Embed a map” tab. Copy the HTML code provided.

5. Return to your Divi site and paste the copied HTML code into the Divi code module.

6. The map should now appear without any error messages. You can adjust the width and height of the map directly within the HTML code.

7. To make the map full-width, match it with the row’s width by modifying the code module’s width and height.

8. To create the hover effect where the map turns to grayscale on idle and becomes colored on hover, go to the code module’s design settings. In the “Filters” tab, adjust the saturation to 0 for idle and 100 for hover.

9. Add a box shadow to the map for a subtle shadow effect.

10. To achieve the overlapping design with the background, you don’t need to mess with section margins. Instead, go to the section settings for the map section and set up a background gradient. Create a gradient that starts with the dark gray background color and ends with white. Set the starting and ending positions to 33 percent.

11. Finally, optimize the map for mobile devices using Divi’s responsive content feature. Open the code module and modify the width and height in the HTML code according to the device size, ensuring it displays correctly on various devices.

By following these steps, you’ll have successfully embedded a Google map with hover effects and an overlapping design on your Divi website, without the need for a Google account or API.