Divi Documentation

Follow the instructions below to install and configure your new theme

« Back to Documentation

The Map Module

Module Overview

The maps modules makes it easy to embed custom Google Maps anywhere on your page. You can even add unlimited pins to the map, and define a custom viewport starting location. The maps modules also comes in a Full Width format, so be sure to check that out as well!

View A Live Demo Of This Module

Google Maps API Key

An API key is required in order to use the Maps Module. To obtain an API key, log into the Google Developers Console, which will guide you through the process, and activate the Google Maps JavaScript API and any related services automatically. The first thing you will be asked to do is create a new project.

Next you will be asked to name your project. You can name the project anything you like. In this example, I simply called it "Maps." You can also input your website's domain name (add an * in front of it if you allow access from both www.domain.com and domain.com) to make sure to other website's are allowed to your your API key.

After you have created an named your project, you will be presented with an API Key that you can use.

After you have obtained an API key, you must copy/paste it into the theme options panel by navigating to:

Divi>>Theme Options>>General Settings>>Google Maps API Key

The Module Options

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.

CSS ID - Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.

CSS Class - Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space.

Title - While creating a new pin, you can assign a Title. This title will appear in the box when hovering over the pin on the map.

Map Pin Address - This is the specific location on the map where your new pin will appear. You can enter the address in a standard format.

Content - While creating a new pin, you can assign a block of content text. This text will appear in the box when hovering over the pin on the map.

Join 371,133 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today