Skip to content

Map Extended Design Options

[Updated on 24 Aug 2018]

Within the design tab you will find all of the module’s styling options, additional google map options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Map Extended Design Options

Controls

Here you can choose different type of options for the map. We've added a long list and will be adding more.

Gesture handling

Prevents users from getting trapped on the map when scrolling a long page. This setting controls how touch gestures on the map are handled. This does not extend to changing the gesture handling mode for Street View; these options only affect the way gestures are handled by the map. The following options are:

  • "Cooperative": Two-finger touch gestures pan and zoom the map, as do all mouse gestures. One-finger touch gestures are ignored by the map. In this mode, the map cooperates with the page, so that one-finger touch gestures can pan the page.
  • "Greedy": All touch gestures pan or zoom the map. This was the previous behaviour.
  • "None": The map cannot be panned or zoomed by user gestures.
  • "Auto": Gesture handling is automatically set to either cooperative or greedy, depending on whether the page is scrollable or not (defined by a comparison of the page body dimensions and the window dimensions).

Draggable On Mobile

Here you can choose whether or not the map will be draggable on mobile devices.

Show Controls

Here you can choose whether or not the map will show the map controls such as zoom, fullscreen control and etc. These control UI elements to allow user interaction with the map.

Control Style

The Map Type control is available in a dropdown or horizontal button bar style, allowing the user to choose a map type (ROADMAP, SATELLITE, HYBRID, or TERRAIN). This control appears by default in the top left corner of the map.

Control Position

Here you can choose the control position within the map.

Zoom Control Position

Here you can choose the zoom control position within the map.

StreetView Control Position

Here you can choose the StreetView control position within the map.

StreetView Control Position

Here you can choose the StreetView control position within the map.

Center Map

If you have multiple markers, this will gather all the markers on the map and center them. Make use of the zoom level below to adjust to your liking.

Center Map Zoom level

The zoom level of the map when using Center Map Option.

Show Directions

Using the Google Map Direction will allow your visitors to search from their current location to the selected marker with different mode of routes.

Map Direction Placement

Here you can choose where to show the map direction will show up.

Show Text Direction

This will show up a step by step direction in text from your visitor's current location to the marker direction.

Use Marker Filter

Category is a perfect way of segmenting your markers and allowing your visitors to show only certain types of markers on the map.

Marker Filter Before Text

Here you can change the before text of the marker filter. By default it is showing up as "Marker Filter By:"

Marker & InfoWindow

Here's where you can customize the marker and the InfoWindow styling such as InfoWindow width, Trigger Method for opening InfoWindow and more.

InfoWindow Width

Here you can define a custom width for the InfoWindow. Default is 200px

Show InfoWindow on load

Here you can choose whether your marker's InfoWindow will show up on map load.

InfoWindow Trigger Method

Here you can choose the trigger method for opening up the InfoWindow. On click or On Hover. When using "Hover", mobile devices will return to click.

Bounce Animation on Marker Pin

Here you can choose whether the Marker Pin will bounce when "Click" or "Hover" depending on the InfoWindow Trigger Method above.

Drop Animation on Marker Pin On Load

This will apply a drop animation on the Marker Pin on map load.

Auto Center Map on Marker Click/Hover

This will auto center the map on marker click/hover depending on the InfoWindow Trigger Method above.

Show Label on Markers

Here you can choose to show a small label under all your markers. By default, the label will show the title of the pin. If you wish to have custom text, you will need to go pin settings to change them.

InfoWindow Styles

Here's where you can customize your InfoWindow Design. You can choose the default Google style or the custom styling which allow you to style the box shadow, border radius and etc.

InfoWindow Styles

Here you can choose whether to use the Google or the custom InfoWindow Styles.

Border Radius

If you choose “Custom Styling” for the “InfoWindow Styles" setting, then this option will appear. The border radius of the InfoWindow. Default is 3px.

Close Icon

If you choose “Custom Styling” for the “InfoWindow Styles" setting, then this option will appear. If you would like to change the Close Icon on InfoWindow, you can do it here.

Close Button Color

If you choose “Custom Styling” for the “InfoWindow Styles" setting, then this option will appear. Here you can pick a color to use for your Close Button.

Background Color

If you choose “Custom Styling” for the “InfoWindow Styles" setting, then this option will appear. Here you can pick a background color to use for your InfoWindow.

Open Marker Animation

If you choose “Custom Styling” for the “InfoWindow Styles" setting, then this option will appear. Here you can choose a animation from the select list. This will apply a animation on the Marker when opened.

InfoWindow Shadow

If you choose “Custom Styling” for the “InfoWindow Styles" setting, then this option will appear. Here you can pick a shadow styling to use for your InfoWindow.

Map Styles

Here's where you can change the design and styling of the Google Map.

Map Type

A Map Type object is an interface which define the usage of map tiles and translate coordinate system from screen coordinate to world coordinate. The Google Maps JavaScript API use MapType Object to hold the information about the maps. There are 4 types to choose from.

  • Roadmap (Default) - To display the default normal 2D road map view.
  • Satellite - To display the Satellite images of Google Earth.
  • Hybird - To display combination of both the satellite and normal view with roads and city names.
  • Terrain - To display the terrain information such as rivers, mountains etc.

Map Styles

Here you can choose a style for your Map using the select list. 74 preloaded Map Design Style from (Snazzy Maps) which change the visual display of elements like parks, roads and different built-up areas by reflecting a new style than that of using default style.

Use Custom Google Map Code

Here you can use your own Google Map Style JSON.

Custom Google Map Style Code

Paste your Google Style JSON code from Google or SnazzyMap. It is best to minify the code first before pasting here but it will also work without minifying.

Map

Use Grayscale Filter

Enabling this option will turn your map into a grayscale image. Note: Make sure you select Grayscale from the Map Styles above in order for this to work.

Text

Here's where you can adjust your InfoWindow's alignment and etc.

Text Orientation

This dropdown menu allows you to specify the orientation of your text to be Left Justified, Centered, or Right Justified.

Text Shadow

This will apply a shadow on your InfoWindow content. There are various type of options and choose your desired shadow or adjust them to suit your style.

Title Text

Here's where you can design and style your InfoWindow Title.

Title Font

You can change the font of your title by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.

Title Size

Here you can adjust the size of your title. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Title Color

By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your title, choose your desired color from the color picker using this option.

Title Spacing

Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your title, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Title Line Height

Line height affects the space between each line of your title If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Title Text Shadow

This will apply a shadow on your title. There are various type of options and choose your desired shadow or adjust them to suit your style.

Content Text

Here's where you can design and style your InfoWindow Content.

Content Font

You can change the font of your title by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.

Content Size

Here you can adjust the size of your Content. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Content Color

By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your content, choose your desired color from the color picker using this option.

Content Spacing

Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your Content, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Content Line Height

Line height affects the space between each line of your content If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Content Text Shadow

This will apply a shadow on your Content. There are various type of options and choose your desired shadow or adjust them to suit your style.

Marker Label Text

Here's where you can design and style your Marker Label.

Marker Label Font

You can change the font of your Marker Label by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.

Marker Label Size

Here you can adjust the size of your Marker Label. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Marker Label Color

By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your Marker Label, choose your desired color from the color picker using this option.

Marker Label Spacing

Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your title, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Marker Label Line Height

Line height affects the space between each line of your Marker Label If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Marker Label Text Shadow

This will apply a shadow on your Marker Label. There are various type of options and choose your desired shadow or adjust them to suit your style.

Map Direction

Here's where you can change text and location icon for Map Direction element.

Current Location Text

You can change the default text "Current Location". This text will appear when visitor clicked on the current location button. A marker and infowindow will show up on the map with their current location.

Location Icon

Here you can pick a custom icon to use for your location icon.

Maker Listing

Here's where you can enable Marker Listing and style the appear of the Marker Listing.

Show Marker Listing

This will display your markers information in a list either on the top or the bottom of the map. Clicking on relevant marker will show up on the map. Map Extended Maker Listing

Show Marker Icon

This will display your markers icon before the title.

Zoom Level

The zoom level of the map when clicking on the relevant marker in the marker listing.

Thead

Here's referring to the content on top of the marker listing where you see Title, Address, Description & Etc.

Thead Title Text

Here's where you can change the Title displayed on the thead.

Thead Address Text

Here's where you can change the Address displayed on the thead.

Thead Description Text

Here's where you can change the Description displayed on the thead.

Thead Category Text

If you choose Enable Marker Listing setting, then this option will appear. Here's where you can change the Category displayed on the thead.

Thead Direction Text

If you choose Enable Show Direction setting, then this option will appear. Here's where you can change the Direction displayed on the thead.

Thead Background Color

If you would like to change the background color of your thead, choose your desired color from the color picker using this option.

Thead Font

You can change the font of your Thead by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.

Thead Size

Here you can adjust the size of your Thead. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Thead Color

By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your Thead, choose your desired color from the color picker using this option.

Thead Spacing

Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your Thead, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Thead Line Height

Line height affects the space between each line of your Thead If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Thead Text Shadow

This will apply a shadow on yourThead. There are various type of options and choose your desired shadow or adjust them to suit your style.

Row Background Color

If you would like to change the background color of your Row, choose your desired color from the color picker using this option.

Row Hover Background Color

If you would like to change the hover background color of your Row, choose your desired color from the color picker using this option.

Row Border Color

If you would like to change the border color of your Row, choose your desired color from the color picker using this option.

Row Font

You can change the font of your Row by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.

Row Size

Here you can adjust the size of your Row. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Row Color

By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your Row, choose your desired color from the color picker using this option.

Row Spacing

Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your Row, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Row Line Height

Line height affects the space between each line of your Thead If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Row Text Shadow

This will apply a shadow on your Row. There are various type of options and choose your desired shadow or adjust them to suit your style.

Marker Clustering

When there are too many markers, the marker clustering utility helps you manage multiple markers at different zoom levels. Map Extended Marker Clustering

Use Marker Clustering

Enable this option will combine markers of close proximity into clusters, and simplify the display of markers on the map.

Marker Clustering Styles

Here you can choose whether to use the Google or the custom Marker Clustering Styles.

Use Animation Effect

If you choose “Custom Styling” for the “Marker Clustering Styles" setting, then this option will appear. Here you can choose whether to use animation on the Marker Clustering.

Animation Effects

If you enable “animation Effect” setting, then this option will appear. Choose a effect from the dropdown list. We will be adding more in the near future.

Size

If you would like to change the size of your Marker Clustering, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider.

Background Color

If you would like to change the size of your Marker Clustering, choose your desired color from the color picker using this option.

Border Color

If you would like to change the border color of your Marker Clustering, choose your desired color from the color picker using this option.

Border Size

If you would like to change the Border Size of your Marker Clustering, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider.

Border Style

If you would like to change the border style of your Marker Clustering, choose your desired style from the dropdown list using this option.

Sizing

Here's where you can adjust the and module's width and height.

Height

Here you can adjust the height of your map. You can drag the range slider to increase or decrease the height, or you can input your desired height size value directly into the input field to the right of the slider. Tips: This is useful when using background images(with effects)

Width

Here you can adjust the width of your map. You can drag the range slider to increase or decrease the width, or you can input your desired width size value directly into the input field to the right of the slider.

Spacing

Here's where you can adjust the margins and paddings of the map extended.

Custom Margin

Margin is the space added outside of your module, between the module and the next element above, below or to the left and right of it. You can add custom margin values to any of the module’s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.

Custom Padding

Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module’s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.

Border

Here's where you can add and style your border around your module. This border can be customized using the following conditional settings

Border Color

This option affects the color of your border. Select a custom color from the color picker to apply it to your border.

Border Width

By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from “px” to something else, such as em, vh, vw etc.

Border Style

Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.

Animation

Animation Style

Pick an animation style to enable animations for this element. Once enabled, you will be able to customize your animation style further. To disable animations, choose the None option.

Map

Google API Key

The Maps module uses the Google Maps API and requires a valid Google API Key to function. Before using the map module, please make sure you have added your API key inside the Divi Theme Options panel. Learn more about how to create your Google API Key here.

Map Center Address

Enter an address for the map center point, and the address will be geocoded and displayed on the map below. This is useful if you have multiple pins, and you want to have the map zoomed in to a specific, more focused location. You can simply type in an address in a standard format, such as “1235 Sunny Road, Some City, State, 88343.”

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.