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;
- Go to Google Maps, search for your location and select it from the results on the left
- Click the blue Share icon on the left panel
- Click on the “Embed a Map” tab in the Share pop-up window
- Copy the iframe code by clicking on the “COPY HTML” link
- 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
- Add a new section with 1 row and add your Code module with the iframe code from Google Maps
- 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 %.
- In Row Settings > Design > Sizing by activating “Use Custom Gutter Width” and setting it to 1
- In Row Settings > Design > Sizing set Width and Max Width to 100%
- 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.
I tried to add the map to one of our test pages but the height doesn’t seem to work as expected. Both height and width to 100%, the width works fine, it takes up the whole window, but the hight only takes about 20% of the window. I checked everything to make sure that everything was set to full screen so I am confused. Check the following link: https://info.flutracking.net/testing-the-map/ to see what I mean. This is the code I used in Divi. This is the generated code I see in Chrome. The hight is very narrow. Any ideas how to… Read more »
hard to see how its set up, but the map will be 100% height of the element it sits in, so setting the row to have 300px etc will then allow the map to fill 100% of that, assuming no padding etc
I tried to post the code I added to Divi for you in my original post but the code was stripped from my post.
Is there any way I can post an image of my settings or something like that or you can send me an email and I’ll reply to your email with a few screenshots to see my settings. Other pages work fines so there are no problems with global settings.
yes, looks like the 100% height doesn’t seem to work as expected. try adding width=”100%” height=”450″ in the code