How to use Google maps in Divi using iFrame embed (no API)

When you add a map module in Divi it will display an error message “This page can’t load Google Maps correctly” and displays a map with “for development purposes only”. This is because the map module requires you to enter a Google Maps API before it will work.

You can get an API from Google and add it to the Map module but this seems to cause issues for many. I just tried and adding a new API and was still getting the map error. The alternative method to add a Google Mpa is to embed it using an iFrame.

How To Embed Google Maps In Divi (no Google API or Plugin)

The method I use now is to embed the map using an iframe from Google Maps. This can be placed in a Divi Code module or any text area within other modules. To embed a map from Google Maps using an iFrame following these steps;

1. Go to Google Maps, search for your location and select it from the results on the left
2. Click the blue Share icon on the left panel
3. Click on the “Embed a Map” tab in the Share pop-up window
4. Copy the iframe code by clicking on the “COPY HTML” link
5. On your Divi website, add a code module anywhere you want the map to display and paste the code you copied. You can also add it into any text area within other modules.

Your Google Map is now displaying on your Divi website with no API and no Map module.

Make your Google Map full width

1. Add a new section with 1 row and add your Code module with the iframe code from Google Maps
2. Edit the iframe code to change the width from width=”600″ to width=”100%”. You can set your height using a fixed pixel number, not %.
3. In Row Settings > Design > Sizing by activating “Use Custom Gutter Width” and setting it to 1
4. In Row Settings > Design > Sizing set Width and Max Width to 100%
5. In Row settings > Design > Spacing set the top & bottom margin to 0px

Customize your map using module filters

With your map displaying via a code module you can then use the Code module design settings to further customize your map. By playing with the settings for default and hover states with various filters applied you can get some interesting effects for your map.

In your code module go to Code Settings > Design > Filter and edit any combinations of hue, saturation, contrast, invert, sepia, opacity, and blur as with any Divi module. Below are a few examples of how you can customize your maps using the module filters.

If you have used the embed method to add a cool Google Map to your Divi website drop a link in the comments and show us what you did.