World Map on Divi

There are several reasons why you might want to have a world map on your Divi powered website. The builder already includes a great module that allows you to add a map generated by Google Maps to your page. However you might be looking to add something more simple, more stylized, that fits your design.

I have developed a plugin called Interactive World Maps that is 100% compatible with Divi and allows you to add a map to your page using a different technology, also from Google, that generates interactive vector maps. You can colour countries, link them to specific pages, add information that will display on tooltips or on lightboxes and even add markers to specific locations. Here’s an example of how a map can look like:

All Countries

Although the plugin doesn’t add a new module to the Divi Builder, it works with shortcodes, so you can add it in any module that accepts text. Here’s how to add the map to your Divi page:

1) Install the Plugin

You can get the plugin for only $21 with 6 months support included and all future updates. Once you have the plugin zip file, you can install it like through the Plugins > Add New > Upload interface in your administration. Once you have the plugin installed you’ll see the new ‘Interactive Maps’ menu entry in your administration menu.

2) Build Your Map

On the plugin’s website, you’ll find some instructions and even a video on how to build your first map. Depending on what you want to achieve, you’ll need to do different things. But basically you should read the instructions on screen so you know what you need to do.

3) Add Shortcode to your Page

Once you save your map, you’ll have access to a shortcode with this format:

show-map id=’X’

You can place this bit of text in any module from the Divi Builder that accepts text. Most likely you’ll end up adding it on the Text Module. Simply copy the shortcode and add it inside the text module, in the text editor. Once you save your page and preview it, you should see your map.

When the responsive mode is enabled for the maps, they will be as big as the container where they are placed. If you place them inside a full width row, then the map should take the full width also, creating a full screen map.

Feel free to ask any questions below on the comments.

If you have already purchased the plugin and you need support, please contact me through the support page on Envato Market.