If you want to add a Google map to Divi you can either use the Divi Map module or embed it directly from Google.
The Divi Map module requires you to enter a Google Maps API key and for you to give Google your credit card details before it will work.
Even then your Google maps may not be working and you may well see a request_denied error.
The alternative method 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 and requires no API to work.
5 Steps to embed Google Maps In Divi (without Google API or plugin)
- 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 to any text area within other modules.
Your Google Map is now displaying live on your Divi website with no API and no Map module.
5 Steps to 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 Divi Code module design settings to further customize your map by using the built-in 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.
Final Thoughts
The Divi Map module is a nice addition to the Divi Theme but for most people, it is just easier to copy and paste the share code directly from Google maps. The need for an API and credit card is too much for most so use this guide and embed the ma directly.
Do you have any examples of a cool Google map use? Drop a link in the comments below
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
You are awesome. Maps in Divi has been driving me crazy. Thank you so much.
🙂
I did this process but after adding the map and than trying to sabe it says it cant be saved. once i delete the map i am able to save again…
not seen this before. i’d suggest opening a ticket with ET.
Yeah, this didn’t work no how no way.
I tried every possible container with the “embed” links and none of it worked.
Yes, it does work.
Please re-read the instructions and look at the images.
I have just re-tested just to double check and it works as expected.
Thanks so much for this. Was struggling with the map API for a full day and was still just loading a blank square. This morning added all our branches in just 15 minutes. Lifesaver!!
glad it worked out for you 🙂
Thanks for the tutorial! Do you know how I could make my map appear with “Terrain” selected by default? Thanks in advance! -Tim