![\"Example](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/map-examples.jpg\")
<\/p>\nThe Divi Map Module is an easy way to display an interactive Google map on your website. You can specify multiple pin locations and is a visual and useful way to share your business’s location on a contact page or an about page.<\/p>\n
In this documentation we’ll go over how to add the map module to your page and all of the settings and design customizations available within the Divi Map Module.<\/p>\n
<\/p>\n
View A Live Demo Of This Module<\/a><\/p>\n Before you can add the Divi Map module to your website, you\u2019ll need to have the Divi theme installed on your WordPress website. Learn how to install the Divi theme on your WordPress website here<\/a>. Once you have the Divi theme installed and activated, we can begin using the features and functionalities of Divi. For additional information on the Divi Builder itself, its interface, usage philosophy and best practices, please refer to our\u00a0Getting Started With The Divi Builder<\/a> guide.<\/p>\n Navigate to the page you want to add a Divi Map Module on and click “Enable Visual Builder” on the WordPress Admin Bar. This will reload your page using Divi’s drag-and-drop interface. You’re presented with three options: Build From Scratch, Load From Library, or Clone Existing Page. For our purposes, select Build From Scratch which will load a blank page.<\/p>\n Divi automatically adds a section and row to your page and the row’s column options popup. Select the column structure you’d like. To learn more about how to modify and customize sections and rows, view our documentation for\u00a0sections<\/a>\u00a0and\u00a0rows<\/a>.<\/p>\n Once the section, row, and columns are set up, click on the grey +<\/strong> icon inside the row. This brings up the Divi Module Library which contains all the modules included with the Divi theme. Scroll down to Map and click on it to load the module. The module library is also searchable. Type the name of the module you want in the search bar at the top.<\/p>\n Now the Divi Map Module is added to your page!<\/p>\n Before you can start using the full functionality of the maps module, you’ll need a Google API Key. A Google API Key authenticates your connection to Google’s location services and makes the Map Module function.<\/p>\n To generate an API key you\u2019ll need a Google account, a project linked with a billing account, and the Geocode API enabled.<\/p>\n Pro Tip:<\/strong> If you created your Google API Key, pasted it in the Map Module, and it’s still not working, you likely need to add a billing method to your Google Account. Why do I need to add my credit card or bank account if Google maps is free?<\/em>. Because Google requires it. However, don’t worry – if your website generates less than 15,000 visitors a month, you’ll likely never be charged. <\/p>\n Once the Map Module is added to the page, the map module settings automatically pop up. This is where all of the content and design styles for this module are configured. These settings are organized into three groups via the tabs at the top of the module: Content, Design, and Advanced.<\/p>\n Inside this tab, you\u2019ll find the content options available for the Divi Map module.<\/p>\n The first section in the Content settings is where you can add and remove map pins. Adding a pin to the map will highlight a specific location on the map. You can add multiple pins which can be helpful, for example, if you\u2019re creating a map of a neighborhood tour of your favorite spots.<\/p>\n Below is an example of what the map looks like with and without a pin added.<\/p>\n To add a pin to the map module, click “Add A Pin”.<\/strong> Once clicked, this will load the individual pin’s content settings.<\/p>\n Inside the pin’s content settings are settings groups to add a title, body text, and map address.<\/p>\n Text<\/strong> Map<\/strong> Now that we’re done customizing the individual pin settings, let’s return to the main module settings by clicking the white back arrow at the top left of the module.<\/p>\n This is where you add your Google API key and choose the focal point address for the map to center on.<\/p>\n If you would like to apply a clickable link to the entire module, you can do so here.<\/p>\n This is where you can add a background color, gradient, image, video, pattern, or mask to this module.<\/p>\n To add a background color to the entire module, click the first tab, the paint bucket. Click “Add Background Color” and choose from your site’s color palette or use the eyedropper icon to find a new color. Note, since the Divi Map Module fills up 100% of the module’s space, you won’t be able to see any backgrounds unless there is an opacity applied to the map or the sizing is adjusted.<\/p>\n To add a background gradient, click the second tab, the gradient tab, then click \u201cAdd Background Gradient.\u201d <\/p>\n To change the gradient colors, click on the gradient stops and select a color from your site\u2019s color palette or use the eyedropper icon to choose a new color. Gradient stops allow you to add more colors to the gradient. Simply click anywhere on the range slider to add a new stop.<\/p>\n To add a background image, click the third tab, the image tab. Then, click the gray \u201c+\u201d sign to bring up the media library where you can select an already uploaded photo from your library or upload a new one. <\/p>\n To add a background video, click the fourth tab, the video tab. Click the gray \u201c+\u201d sign to bring up the media library, where you can select an already uploaded photo from your library or upload a new one. <\/p>\n To add a background pattern, click the 5th tab, the pattern tab, then click \u201cadd background pattern.\u201d Choose the pattern type you want from the dropdown. <\/p>\n To add a background mask, click the 6th tab, the mask tab and then click \u201cadd background mask\u201d. Select the mask type you want via the dropdown menu.<\/p>\n The Admin Label is where you can give the module a name only visible to you in order to assist in keeping things organized and easy to understand on the back end. By default, the admin label will be the name of the module. You can change the text of the admin label to reflect what you\u2019d like.<\/p>\n Inside this tab, you\u2019ll find all the design styles and settings for the Divi Map module.<\/p>\n This is where you can adjust the look and feel of the map by adjusting hue, saturation, brightness, contrast, color tones (inverted colors or sepia), opacity, and blur of this map. Applying the grayscale filter will change the map colors to black and white while leaving the pin red. Blend Mode refers to how the module blends with the layers beneath it. By default, “normal” will be selected.<\/p>\n Define the sizing (width and height) of the module. You can set a max-width and a max-height and a min-height. Choose the module alignment (left, center, or right) by clicking the arrows. By default, modules align center.<\/p>\n Add margins or spacing to this module by typing in numerical values. Margins add space outside the module element, and padding adds space inside the module element. To lock in ratios and keep the values the same, you can click the chainlink icon between the values you want to always be identical (ex: top and bottom).<\/p>\n Add a border to the module. You can add a complete border or add a border to only one side of the module. Adjust the width via the range slider and select a color. Choose a border style by clicking the dropdown.<\/p>\n Adds a drop shadow to the module. Once a shadow style is clicked, you can customize the position of the drop shadow (horizontal and vertical), the strength of the blur, and the spread strength by adjusting the range slider or inputting numerical values. Select the drop shadow\u2019s color from your site\u2019s color palette or click the eyedropper to find a new color. Choose the box-shadow position to be inside the container or outside the container via the dropdown.<\/p>\n Adjust the hue, saturation, brightness, contrast, color tones (inverted colors or sepia), opacity, and blur of this module. The Blend Mode refers to how the module blends with the layers beneath it. By default, “normal” will be selected.<\/p>\n Scale, translate, rotate, skew, and set origin points for this module. Tab through to access each feature. Configure each feature by inputting numerical values or dragging and expanding the box or circle. You can lock in these values to always be identical by clicking the chain link icon at the bottom right.<\/p>\n Here you can apply animation to the module. Once you choose an option you can also adjust the duration, delay, opacity, and speed of the animation and whether you want it to continually repeat or just happen once.<\/p>\n This is where the advanced customization settings are for the Divi Map module.<\/p>\n This is where you can assign a specific CSS ID or class to this module. This is helpful when you\u2019d like to apply custom CSS to a module by using your child theme\u2019s stylesheet.<\/p>\n You can also apply custom CSS to this module by pasting it in this tab. When you click on the Custom CSS tab, you\u2019ll see individual sections where you can add CSS to specific elements in the module.<\/p>\n This tab allows you to choose when to display this module based on a set of conditions, like what time a user is visiting the page if they\u2019ve already purchased from your company before, what browser they are using, what operating system they\u2019re using, and more. You can add one condition or multiple conditions.<\/p>\n This defines the visibility of the module. You can choose to disable it (hide it from view) when the display window is a Phone, Tablet, or Desktop by clicking the corresponding checkbox. You can also determine how you want overflow content to be displayed if the content overflows the element that it is in. You can choose visible, scroll, hidden, or auto for both horizontal and vertical content. By default, “auto” is selected.<\/p>\n This controls the transition duration of the hover animation as well as the delay, and speed curve.<\/p>\n This defines the position of the module as well as the offset origin, vertical and horizontal offsets, and the z-index of the module. The available positions are default (which is automatically selected), relative, absolute, and fixed. Defining the z-index allows you to specify the stack order of elements. Elements with a higher z-index number overlap elements with a lower z-index.<\/p>\n This defines how the module behaves upon scroll. You can make the module sticky (to top, bottom, or top and bottom), and choose if the module transforms upon scroll. You can also enable vertical motion on this module which allows you to adjust the speed at which this element scrolls (making it faster or slower) without affecting the surrounding elements. The Motion Trigger Effect allows you to choose when the scroll effect you just applied is triggered: when the top of the element is in view, the middle, or the bottom.<\/p>\n How to add, configure and customize the Divi map module.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,9,2],"tags":[],"class_list":["post-745","post","type-post","status-publish","format-standard","hentry","category-divi-builder","category-modules","category-divi"],"yoast_head":"\nHow to Add the Divi Map Module to Your Page<\/h2>\n
Add the Divi Map Module<\/h3>\n
![\"Enable](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/1.jpg\")
<\/p>\n![\"\"](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/3.jpg\")
<\/p>\n![\"How](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/4.jpg\")
<\/p>\n![\"\"](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/5.jpg\")
<\/p>\nGenerate A Google Maps API Key<\/h3>\n
\n
![\"Generate](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/01\/1.2-map-comp.jpg\")
<\/p>\nAll Divi Map Module Options Explained<\/h2>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/01\/5-map-comp-1.jpg\")
<\/p>\nContent Settings<\/h3>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/01\/6-map-comp.jpg\")
<\/p>\nAdd A New Pin<\/h4>\n
![\"Add](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/01\/9-map-comp-1.jpg\")
<\/p>\n![\"With](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/01\/8-map-comp-1.jpg\")
<\/p>\nHow to Add a Pin to the Divi Map Module<\/h5>\n
![\"Add](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/01\/10-map-comp-1.jpg\")
<\/p>\n![\"Pin](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/01\/11-map-comp-1.jpg\")
<\/p>\n
\nHere you can add the text content for the pin like a pin title and descriptor text. When the pin is clicked, this text will display in a popup. If you don’t want any information to display in the popup, leave these fields blank.<\/p>\n\n
![\"Pin](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/01\/12-map-comp-1.jpg\")
<\/p>\n
\nThis is where you paste the address you want the pin to point to.<\/p>\n\n
![\"Pin](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/01\/13-map-comp-1.jpg\")
<\/p>\n![\"Return](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/01\/14-map-comp-1.jpg\")
<\/p>\nMap<\/h4>\n
\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/01\/15-map-comp-1.jpg\")
<\/p>\nLink<\/h4>\n
\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/16-map-comp.jpg\")
<\/p>\nBackground<\/h4>\n
How to Add a Background Color<\/h5>\n
![\"How](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/17-map-comp.jpg\")
<\/p>\nHow to Add a Background Gradient<\/h5>\n
\n
![\"How](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/18-map-comp.jpg\")
<\/p>\nHow to Add a Background Image<\/h5>\n
\n
![\"How](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/19-map-comp.jpg\")
<\/p>\nHow To Add a Background Video<\/h5>\n
\n
![\"How](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/20-map-comp.jpg\")
<\/p>\nHow to Add a Background Pattern<\/h5>\n
\n
![\"How](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/21-map-comp.jpg\")
<\/p>\nHow to Add a Background Mask<\/h5>\n
\n
![\"How](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/22-map-comp.jpg\")
<\/p>\nAdmin Label<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/23-map-comp.jpg\")
<\/p>\nDesign<\/h3>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/24-map-comp.jpg\")
<\/p>\nControls<\/h4>\n
\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/25-map-comp.jpg\")
<\/p>\nMap<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/26-map-comp.jpg\")
<\/p>\nSizing<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/27-map-comp.jpg\")
<\/p>\nSpacing<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/28-map-comp.jpg\")
<\/p>\nBorder<\/h4>\n
\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/29-map-comp.jpg\")
<\/p>\nBox Shadow<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/30-map-comp.jpg\")
<\/p>\nFilters<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/31-map-comp.jpg\")
<\/p>\nTransform<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/32-map-comp.jpg\")
<\/p>\nAnimation<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/33-map-comp.jpg\")
<\/p>\nAdvanced<\/h3>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/34-map-comp.jpg\")
<\/p>\nCSS ID & Classes<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/35-map-comp.jpg\")
<\/p>\nCustom CSS<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/36-map-comp.jpg\")
<\/p>\nConditions<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/37-map-comp.jpg\")
<\/p>\nVisibility<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/39-map-comp.jpg\")
<\/p>\nTransitions<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/40-map-comp.jpg\")
<\/p>\nPosition<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/41-map-comp.jpg\")
<\/p>\nScroll Effects<\/h4>\n
![\"Divi](\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/42-map-comp.jpg\")
<\/p>\nDivi Map Module Resources<\/h2>\n
\n
Continue Learning<\/h2>\n
\n