How to insert a map with Divi?

In this video we will see how insert a Google map on a page we are creating with Divi. This is very useful when we are creating, for example, a contact page and we want to graphically show our location.


Divi Manual

How to insert a map with Divi?

The first thing to do to insert a map with Divi is to add a new row in the place where we want to insert it. In this case it will be a full width row. Then inside the row we will insert the module that will contain the map.

Divi within all its modules has one that is precisely the map module. It is the one that allows to insert maps in the page that we are designing.

The problem is that the Divi map module to work needs a Google API key, but Google API keys are not completely free.

Then Google at the time of activating your key will ask you to enter the data of a credit card to, eventually charge you if certain limits of use with the API are exceeded.

What happens if we don't have a credit card, or if we simply don't want to load the data?

The solution is to discard the Divi map module and insert the map in the same way that Google Maps maps are inserted on any website, which is with the insertion code offered by Google itself.

For that we will go to Google Maps and the first thing we have to do is find the address of the company, since this way we get Google to put the marker on the map.

Once we have the marker located we adjust the zoom as we like and we go to the option that says Share or insert the map in the menu.

We click and a window will open where we will choose the tab Insert a map, in which we have a preview of the map where we can choose different sizes (medium, large, small and custom).

In this case we are going to use the custom size because we want to fit the map in a measure that we are going to have defined by the page.

☀ If you do not know what are the measurements in pixels that your map should have, you have to try until you find the one indicated, it makes no sense to get more complicated with that.

I'm going to put a measure of 1,300 x 500 pixels and then simply copy the insertion code by clicking on the option Copy.

Now within the row that you had already inserted we will create a module (not the map module), we will use the Divi code module and there we paste the Google Maps embed code.

The map we had created appears in the preview. We can go to the row format to give it a border and assign it a color, as well as adjust the internal margin and the one below. Nothing happens if the map code appears when we are in the editor, since it is restored only when you exit.

We can also go to the settings of the code module option Design and in Filters, we can play with the tonality of the map or with the saturation. This is useful if, for example, we want to put it in black and white so that it is monochromatic and may be better with the design of the page.

Finally we leave the visual constructor, saving the changes, to verify that the page has been correctly configured with the map that we just inserted.

There is the map, we can move it and zoom like any Google map.

Related topics


Divi Manual
☀ The embedding blocks of Gutenberg

Did this guide help you to insert a map into Divi? 👉 Then give me a hand to help more people by sharing it on social networks. Thank you!

Leave a comment

Your email address will not be published. Required fields are marked *