Posted on January 14, 2017 by Randy A. Brown in Divi Resources |
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.
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.
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.
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 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.
The Map Extended module builds on the standard Map module, giving you tools to customize your maps even further.
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.
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.
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.
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.
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.
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.
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 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 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 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.
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:
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.
The information box is automatically opened when the map loads. This example uses the Transport for London map style.
This makes the pins bounce so they stand out more. This example uses the Decola map style.
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.
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.
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.
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.
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.
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.
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.
Here’s a look at the original page using the full width section and Divi’s Fullwidth Map module.
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.
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.
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.
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