Divi Plugin Highlight – Map Extended Module

Posted on January 14, 2017 by in Divi Resources | 20 comments

Divi Plugin Highlight – Map Extended Module

The Divi Builder has a Map module, allowing you to display Google Maps within your Divi designs. It works great and is a good choice if you want a standard Google Map, however it doesn’t have any adjustments for styling. If you want to style your Google Maps you’ll need something like Divi Map Extended.

Divi Map Extended adds a new module to the Divi Builder that works with any Divi Builder-based website. It adds lots of map styles, lets you select map types, upload your own pin icons, set the map height, and create your own information box content.

Divi Map Extended is available from: DiviWebDesign.com.

Before we look at the Map Extended module, let’s look at the standard Divi Map module for comparison.

Standard Divi Map Module

The standard Divi module can be used with Standard and Specialty sections. To use it you’ll need a Google API Key. Click on the link provided in the General Settings to learn about creating your own key.

General Settings

Within General Settings you can place multiple pins, choose the exact address you want to display, enable zoom using the mouse wheel, enable dragging on mobile, disable on phone, tablet, or desktop, and change the admin label.

Create a Pin

Add the Map Center address to display the map you want. You can add multiple pins to this map, with each pin having a different location and information. To create a pin for your map select Add New Pin within the map module.

Here you give the pin a title and choose its address. The title will appear when visitors mouse-over the pin. You can place the pin by entering the address or by dragging and dropping the pin where you want it on the map. The pin will automatically display the name of the location and address.

You can also define the content for the pin’s info-box. This allows you to create custom content instead of using the default Google Map information. Add the content for the information box into the WYSIWYG editor. Just like creating content for pages and posts with the WYSIWYG editor, you can place media, text, or other content. In this example I’ve added the text and an image that I want to display.

Here’s how the map looks on the Contact Us page from the Divi library. In this example I have placed one pin and defined the content for the info-box.

Advanced Design Settings

Advanced Design Settings give you a grayscale filter. You can choose the filter amount to get the grayscale look you want.

The grayscale is useful for making your color pop or for toning down the color. It can also be helpful if the color doesn’t fit within your website’s styling or if you want the map to blend in rather than standing out. In the example above I’ve placed two pins and set the grayscale to around 70%.

The standard Map module gives you the tools define a map and place multiple pins. You can even create your own content for the info-box. What if you wanted to do more with your maps, such as customize the map, pins, or content? Let’s take a look at the Map Extended module and see what it can do.

Map Extended Module

The Map Extended module builds on the standard Map module, giving you tools to customize your maps even further.

Installation

Before installing the plugin you must first unzip the download file. Inside you’ll find documentation and the zipped plugin file. This is the file that you’ll upload. Upload and install this file as normal.

Divi Builder Module

The Map Extended module is added to the Divi Builder and is used the same way as any module. It’s easy to spot because the module is bright yellow. It can be used with Standard and Specialty sections.

General Settings

The General Settings work the same as the standard Divi Map module except for the addition to show controls. This allows you to disable the default controls such as zoom, map type, and walk routes.

Unless you disable the controls the maps look at work the same, at least until you look at the Advanced Design Settings.

Advanced Design Settings

The Advanced Design Settings is where the two modules differ. This one includes choices for map options, map types, default display choices, animations, map height, and lots of font styles.

Map Options

Rather than just a grayscale option, this module uses Snazzy Maps data to provide different styles for Google Maps. Where we originally had one choice we now have over 70. Most are re-colored but some remove labels, etc. All of them give the map a new look. Some are more extreme than others and some work better with certain map types. Let’s take a look at a few examples.

Midnight Commander

This one is called Midnight Commander. All of the land and water are dark blue. Larger roads are highlighted. Labels are a light tan and stand out nicely. Despite the dark look it’s clean and relatively easy to navigate.

Mondrian

This one is called Mondrian. Water is light blue, roads are black, and blue, red, yellow, and cream are used for land elements. This one doesn’t show labels.

Cladme

Cladme uses just a few colors to show water, land, roads, and labels. Even with just a few colors I find it easy to read and follow.

Orange

Orange focuses primarily on the color orange for water and major roads. Tan is used for land while smaller roads are light tan.

Bright and Bubbly

Bright and Bubbly uses lots of blue, red, tan, brown, and green. Black is used for the small road names while areas are labeled with red outlined in white.

Map Type

You can set the default map type. If you disable controls your readers will be unable to change it. There are four types of maps to choose from:

  • Roadmap
  • Satellite
  • Hybrid
  • Terrain

The various combinations of map styles and map types can create some interesting designs. You may have to experiment to find the combination that works the best. Here’s a look at the Vintage map option with all four map types.

Vintage with Roadmap just shows the roads.

This is Vintage with Satellite. Satellite isn’t affected by the map style, so it will look the same regardless.

Hybrid overlays road data on top of satellite imagery. This one uses the Vintage style over the Hybrid map.

This is Vintage with Terrain. This one adds terrain to the road view.

Show Info Window on Load

The information box is automatically opened when the map loads. This example uses the Transport for London map style.

Bounce Animation on Marker Pin

This makes the pins bounce so they stand out more. This example uses the Decola map style.

Define a Height for Map

Make the map any height you want and you can adjust it different between desktop, tablet, and phone. In this example I’ve make the map 800 pixels high. You can even use it in narrow columns to create a tall and skinny map. This map uses the Flex map style.

Styling

The rest of the adjustments allow you to customize the fonts in the information box. You can choose the, font and font style, size, color, letter spacing, and line height for both the title and content.

Since I’ve been using the San Diego Zoo as one of my pins I’ve chosen colors and font styles that are similar to those on their website. I’ve also increased the font size, spacing, and line height. This example uses the Bright Dessert map style.

Custom Pin

Another advantage of Map Extended is the ability to upload your own pin icon for each pin you create. You can set the width and height of the pin so if you use the same icon you can vary their sizes if you need to.

For example, if you have a store with more than one location you can make the icon for the most prominent location larger than the others to show that it’s the headquarters, largest, or first location.

This one uses two free icons with Lemon Tree map style and Terrain map type. Since the top icon is circular I had to set the size or it would appear too narrow. I left the bottom icon at default to show the difference.

Examples

The standard map module only has grayscale adjustments, so there isn’t much we can do in the way of design. The maps are just there on the site, sometimes not fitting in well at all. With Map Extended all of the map styles and font styling choices give us some good opportunities to style the maps to fit the website. I’ve created a couple of examples. Images for these examples were taken from Unsplash.com.

Beach Wedding

Here’s an example of a website for a beach wedding. Wedding websites require certain colors and fonts and they also benefit from a Google Map to help your guests find the right place. Unless you can style the map it could look out of place. This one uses the Light Monochrome map style. The fonts use the same styling as the rest of the site. The info box is set to open on load.

Outside Restaurant

This example uses a parallax background with text, image, and map in an overlay. The map style is PixMix. I’ve set the info box to open on load. The info box shows a white background but I wanted a darker background to help fit in with the styling of the site. I used in-line CSS to style the background of the info box. I set the map height to 600 pixels. This one also has a custom icon for the pin (a plate with knife and fork) set at 32×32 pixels.

Fullwidth Map

The standard Contact Us layout includes a Fullwidth Map. The Fullwidth Map is available in a Fullwidth section. The Map Extended module doesn’t work with a Fullwidth section but there is a way to make it full width. In the Contact Us example above I used a standard section. I wanted to recreate the page to look like the original.

Fullwidth Map Module

Here’s a look at the original page using the full width section and Divi’s Fullwidth Map module.

Map Extended Module in Fullwidth

This is the same effect using a standard section and the Map Extended module. I adjusted the row settings to fullwidth, set the gutter width to 0, and used 0 padding for top, right, bottom, and left. The result looks the same as the full width map. This is the default map set to roadmap.

Extra

It works great with Extra. The module reacts the same as the standard Map module, so you can use it in the same way regardless of whether you’re using Divi or Extra.

License, Updates, Support, and Documentation

The plugin can be used on unlimited websites for you and your clients. It includes one year of updates and six months of support.

Documentation is included with the download package. It’s an HTML file that opens in your browser and shows how to install and activate the module, how to load the map styles, open the info window on load, use animation, use custom icons, and adjust font settings. It also includes detailed information on how to use the module to create a fullwidth map without using a fullwidth section. The information includes the row settings, making the row fullwidth, using a custom gutter width, and using custom padding.

Final Thoughts

Divi Map Extended offers a lot of design features that are not available in the standard Divi Map module. Choose between multiple map options and types, create your own info box content and style it, show the info box on load, add your own pins, animate pins, define the map height, and make maps fullwidth. All of the features and adjustments are intuitive to use. If you’re comfortable using Divi modules then you’ll feel right at home with this module. If you need to customize maps in your Divi designs then the Divi Map Extended module is worth considering.

Divi Map Extended is available from: DiviWebDesign.com.

Have you used Divi Map Extended? Let us know your thoughts in the comments below!

Featured Image by best pixels / shutterstock.com

Premade Layouts

Check Out These Related Posts

20 Comments

  1. This just made my current project much much easier! This rocks! Thank you!!

    • That’s great to hear Elizabeth! I’m glad you like it!

  2. So helpful! Thanks for adding that 🙂 Will definitely check that out!

  3. now we are talking. taking divi to up to the level it deserves 🙂

    let’s have more such plugins/modules which help us create page elements with ease!

  4. What would be a great feature would be able to have a start and expiration dates for a given pin.

  5. Very nice! Purchased, and I have just the site I want to use it on already.

  6. Fantastic plugin. Monday I will buy.

  7. Great plugin – I wish that Divi had at least some of these features in their standard map module.

  8. This is funny on so many levels… I dont see so often a company trying to sell products from others by explaining how other products are better. I mean this is just one example but isnt all. Before few days i took time and took a look for similar post in the last year, and more i think about that less reasons i have to renew my ET sub. I mean, its great Divi have so many payed plugins but from the economic point of view its pointless. I dont know if you have your fingers in part of those plugins but pretty soon Divi will come to the point to not be worth to have. Its much easier and cheaper to go to TF and buy the theme you need with all the plugins instead of paying for the theme and then spend 2-3 times (or more) for payed addons. The short version of this post should be “our map module is good but from this guys is awesome and you should buy it”, what is funny to see as we pay for your map module or to say Divi theme.

    • What is TF?

    • While I don’t agree my investment in Divi is not worth it, I do agree with your comment: “our map module is good but from this guys is awesome and you should buy it.”

      Thanks! 🙂

  9. hello , great but i’m looking for a plugin that could show a list like in the theme Explorable ; do you think it will be possible to find that somewhere ?

    Tks

  10. Does this map plugin included in elegant theme membership?

    Does it provide the function to show a driving route from A to B?

  11. Hi, I am looking for a way to implement a Map for my site-Users in BuddyPress/bbPress-Forum. 1. Users can mark their own residential location and 2. display a map only for registered users with all Users on one map (search form by distance etc.). I use Divi 3.0.27, buddy press 2.7.4, bbpress 2.5.12. Buddypress Map, Geo for WP,… seem to be too old for working. Here is my intention to implement a map: we are a group of beekeepers and want to see all beekeepers around the current or searched location. But only on pages that are for signed-in members. Every member who signs up, will be automatically be shown in a map of all beekeepers. Is that possible?

  12. Map styles (json) and map Type (road/sat/hybrid) is bare minimum that should be standard divi module.

  13. Is it possible to set the initial zoom level on the map? I did not see that anywhere in the information above… Thanks!

  14. Hi,

    I have a general question to the use of the extra to buy plugins. Can I use these plugin to all my websites (like DIVI) or have I to buy a license for each website?

    Have many Thanks Frank Weber

  15. I love the idea of a map for my website with pins showing the places I work. I wonder, if I name the pins to the village/town area rather than the exact address, do you think that may be beneficial to SEO – ie. if someone was looking for someone doing what I do in an area on the map, would it help them to find me?

  16. Hi there, does this plugin allow you to upload / refresh the data displayed on the map via an Excel or .CSV file?

Join To Download Today

Pin It on Pinterest