Divi Map Extended

Enhance your Divi website google map with styles. The Divi Custom Map Extended Module is designed to work with any Divi Builder based site with advanced features.

Divi Map Extended

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.

Custom Marker Icon

Upload your own custom icon or image for each marker pin. Easily set custom height and width for individual marker pins.

Map Styles

Create your own map styles from SnazzyMap or Google Map Styling Wizard and paste the JSON codes into Divi Map Extended.

Marker Pin Options

Many marker pin options so that you can play around with to suit your needs. Click and Drop Animation, Marker Pin styles and many more.

Marker Label

If you just want to show label below the marker, then you can simply use this feature. The label will help visitors to notice it right away.

Marker URL

Depending on the Trigger Method, you can set an URL to each marker and open an URL(open in this window or in a new window).

Marker Clustering

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

Marker Listing

This will display all your markers in a table list below your Map. Clicking on the relevant marker listing will also show up on the map.

Map 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.

Marker Category Filtering

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

Infowindow Customization

If you don’t like the default Google InfoWindow style, you can always customize your InfoWindow to suit your needs.

Marker Cover Image

Show a featured image on top of your InfoWindow so that your visitors can get a better picture of your marker details.
Custom Marker Icon

Beautify Markers

Besides uploading your own custom image for makers, you can also set different pin color right inside Divi Map Extended. Easily set custom height and width for individual marker pins.

Divi Web Design

Upload your custom icon with just a few clicks!
Divi Web Design
Singapore 510429
Upload your custom icon with just a few clicks!
Direction

Sentosa

Sentosa
39 Artillery Ave, Singapore 099958
Direction

Marina Bay Sands

Marina Bay Sands
10 Bayfront Ave, Singapore 018956
Direction

Divi Web Design

Clicking on all these markers will auto center it.
Divi Web Design
Singapore 510429
Clicking on all these markers will auto center it.
Direction

Sentosa

Clicking on all these markers will auto center it.
Sentosa
39 Artillery Ave, Singapore 099958
Clicking on all these markers will auto center it.
Direction

Marina Bay Sands

Clicking on all these markers will auto center it.
Marina Bay Sands
10 Bayfront Ave, Singapore 018956
Clicking on all these markers will auto center it.
Direction

Divi Web Design

You can even style the infowindow Title and Content!
Divi Web Design
Singapore 510429
You can even style the infowindow Title and Content!
Direction

Map Styles

Stylish Divi Map

Show your visitors stunning and beautiful Google Maps. Select 74 preload styles or create your own map styles from SnazzyMap or Google Map Styling Wizard and paste the JSON codes into Divi Map Extended.

Marker pin options

No limit for marker

Many marker pin options to choose from so that you can play around with to suit your needs. Options such as Trigger Method(On click or On Hover) for opening the InfoWindow, InfoWindow Width, Bounce Animation, Drop Animation on page load, Marker URL, Marker Label and opening all marker InfoWindow on load.

Divi Web Design

Open InfoWindow On load.
Divi Web Design
Singapore 510429
Open InfoWindow On load.
Direction

Sentosa

Bounce Animation on Click
Sentosa
39 Artillery Ave, Singapore 099958
Bounce Animation on Click
Direction

Airport

Drop Animation on load
Airport
Airport Blvd, Changi Airport Singapore (SIN), Singapore
Drop Animation on load
Direction

Divi Web Design

Divi Web Design
Singapore 510429
Direction

Sentosa

Sentosa
39 Artillery Ave, Singapore 099958
Direction

Marina Bay Sands

Marina Bay Sands
10 Bayfront Ave, Singapore 018956
Direction

Singapore Zoo

Singapore Zoo
80 Mandai Lake Rd, Singapore 729826
Direction

Singapore Changi Airport

Singapore Changi Airport
Airport Blvd, Changi Airport Singapore (SIN), Singapore
Direction

Marker clustering

Make it neat

The marker clustering is very useful if you have too many markers. You can apply clustering on your markers easily using this plugin. The marker clustering utility helps you manage multiple markers at different zoom levels. To be precise, the ‘markers’ are actually ‘items’ at this point, and only become ‘Markers’ when they’re rendered.

Marker Listing & FILTERING

Less is more

Using the Marker Listing will display all your markers in a table list below your Map. Clicking on the relevant marker listing will also show up on the map with the ability to adjust map zoom. You can also style the listing.

Marker Category is the perfect way of segmenting your markers and allowing your visitors to show only certain types of markers on the map. Works nicely with Marker Listing.

Marker Filter By:
Title
Categories
Address
Description
Directions

Sentosa

Content for Sentosa

Sentosa
39 Artillery Ave, Singapore 099958

Content for Sentosa

Direction

Marina Bay Sands

Content of Marina bay sands

Marina Bay Sands
10 Bayfront Ave, Singapore 018956

Content of Marina bay sands

Direction

Divi Web Design

Content for Divi Web Design Marker

Divi Web Design
Singapore 510429

Content for Divi Web Design Marker

Direction

Khatib Bongsu Park Connector

Content for Park
Khatib Bongsu Park Connector
Yishun Avenue 6, Khatib Bongsu, Singapore 768959
Content for Park
Direction

Airport

Content for Airport
Airport
Airport Blvd, Changi Airport Singapore (SIN), Singapore
Content for Airport
Direction
Map Directions

Find location easier

Using the Google Map Direction will allow your visitors to search from their current location to the selected marker. Clicking on the location icon will get visitors’ current location and route to the selected marker with different mode of route such as Driving, Walking, Cycling and Transit. With text direction, visitors will have a clearer direction.

Note: Since this is in Singapore, I would suggest typing the address “Singapore Changi Airport” to see how direction route you through.

Divi Web Design

Fullwidth Map Extended is included as well!
Divi Web Design
Singapore 510429
Fullwidth Map Extended is included as well!
Direction

Bird Park

Content for Bird Park
Bird Park
2 Jurong Hill, Jurong Bird Park, Singapore 628925
Content for Bird Park
Direction

Start building with Divi Map Extended Module