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.
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