Skip to content

Map Extended

Map Extended module

Enhance your Divi website google map with styles. The Divi Map Extended Module is designed to work with any Divi Builder based site with advanced features. If you are looking to enhance your Google Map experience in Divi such as marker animation, map styles, marker clustering, marker listing or direction, then this is for you. Take a look at the demo below and see what the Divi Map Extended can do and help you in your Project. This is just a beginning, as we are planning to add in more useful features. The map extended 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 map extended modules also comes in a Full Width format, so be sure to check that out as well!

You can read more of the full features here.

Google Maps API Key

An API key is required in order to use the Map Extended 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.

Map Extended has direction and geolocation features and more to come such in the near future. Just make sure that you have enabled all of the following APIs –

  • Google Street View Image API
  • Google Places API Web Service
  • Google Maps Geocoding API
  • Google Maps Directions API
  • Google Maps Distance Matrix API
  • Google Maps Geolocation API

Map Extended module google api

Next you will be asked to name your project. You can name the project anything you like. In this example, I simply called it "My Domain 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.

Map Extended module google 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

Map Extended module add google api

Important: Make sure a valid Google API Key has been entered inside the Divi Theme Options panel. The Map Extended Module will not work without it.

How To Add A Map Extended Module To Your Page

Before you can add a Map Extended module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode.

add Map Extended module

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. Locate the Map Extended module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word "Map Extended" and then click enter to automatically find and add the Map Extended module! find Map Extended module

Using the Visual Builder, add a Standard Section to the bottom of the contact page. Then insert the Map module to your new section. In the Content tab of the Map Extended Settings, enter your company address under the Map Center Address option. The Map Center Address is for the map center point.