Plugin Review: Supreme Maps Pro For Divi

Is the native Divi Map module too limited for your needs? Let’s dive into the feature-packed plugin Supreme Maps Pro from the guys at Divi Supreme.

Here’s a complete walkthrough of Supreme Maps Pro. Enjoy!

Summary: Supreme Maps Pro For Divi

Plugin rating:

Supreme Maps Pro is a premium Divi plugin that adds two new modules:

  • The Leaflet Maps Module that is a featherweight alternative for ultrafast pagespeed. And it doesn’t require a Google API key.
  • The Google Maps Module has a wide array of advanced features like Marker Clustering, Custom Marker Icon, Customizable Pop Up Options and extensive design settings including six different Map Styles.

More map modules will come in future updates. Next in line is a Bing Map module. The maps loads fast thanks to slim code and performance boosters like Dynamic CSS and Dynamic JS.

Plugin Features

  • Add Leaflet Maps with or without a Google Maps API key
  • Add Google Maps with far more features and design options then the default Divi Map Module
  • Choose between six preset map styles or add your own JSON style
  • Show location information on hover or click
  • Add unlimited markers with custom marker images or choose from hundreds of icons
  • Enable Marker Clustering if you use many markers
  • Style and customize different Marker Pop Ups or trigger iFrames, Divi Library design, videos, images or custom links
  • Style or hide default map elements like zoom control, scale control and map type control.
  • … and much more.

Pricing & License

Enter the discount code DIVIMUNDO in the checkout to get 10% off.

Personal: $19.00 $17.10 for 1 year on 1 website.

Professional: $39.00 $35.10 for 1 year on unlimited websites.

Agency: $79.00 $71.10 for life-time on unlimited websites.

All modules and features + support and automatic updates are included. You can also try the free lightweight version Divi Supreme Maps. Both plugins are developed by Divi Supreme.

Installing the plugin

  1. Purchase Supreme Maps Pro at Divi Supreme
    Enter the code DIVIMUNDO in the checkout for 10% discount
  2. Download the plugin ZIP file
  3. Log in to your WordPress dashboard
  4. Go to Plugins » Add new and click Upload Plugin
  5. Upload and activate the plugin.
  6. You will now be asked to install the Supreme Maps Lite version as well. Go ahead and activate it.

That’s it. You should now see Supreme Maps in the WordPress dashboard menu.

Install Supreme Maps Pro For Divi

Add your license key

  1. From your WodPress dashboard, go to Supreme Maps » License
  2. Add your license key in the field License Key and click Save & Activate License Key

Now you have access to automatic plugin updates.

Add the Supreme Maps Pro license key

The New Supreme Map Modules

You will now find two new modules in the Divi Builder: Google Map and Leaflet Map. Watch the video above for a full walkthrough of all the features. We’ll start with the featherweight Leaflet Map.

Google Map and Leaflet Map

1. The Leaflet Map Is Light As Feather

Leaflet is an open-source JavaScript library for responsive interactive maps. It’s mostly known by developers but Supreme Maps Pro makes it available for everyone by integrating it with the user-friendly Divi Builder.

There are two reasons to choose a Leaflet map over a Google map:

  1. Leaflet is super lightweight with just 39 kb of JS. That equals the weight of a small photo. If if you are dead serious about pagespeed, this is the option for you.
  2. You don’t need a Google Maps API key which really can be a hassle to configure these days. With that said, Supreme Maps Pro gives you the option to add one if you don’t want to add markers using coordinates.

Even though there are plenty of features and settings in the Leaflet Map module, you will find more advanced options in the Google Map module.

Example of a Leaflet Map

Example of a Leaflet Map created with Supreme Maps Pro.

2. The Google Map Is Packed With Features And Design Settings

The Google Map module has everything that the native Divi Map module has (unlimited markers, all the Divi design settings etc.) and much, much more. Here are a few of my favorite features:

  • You can easily add custom marker images or choose from hundreds of icons (Font Awesome and Divi icons)
  • Choose between 6 preset map styles – or create a unique style with JSON (advanced)
  • Style the popups in detail including “open all”, hover or click triggers and opening animations
  • Trigger iFrames, videos, images, Divi library layouts or custom links on marker click
  •  Enable marker clusters and tweak the settings

… and much more. Watch the video to see the complete list of features.

Google Maps example 1

Example of a Google Map created with Supreme Maps Pro. In the middle you can see a marker cluster with three markers. 

Google Maps example 2

Another example of a Google Map created with Supreme Maps Pro. Choose from six different map styles or create your custom style using JSON.

What about pagespeed?

Pagespeed is more important then ever given impatient users and the Google Web Core Vitals updates.

Supreme Maps Pro only loads the JavaScript needed when a map is loaded. You can also enable Dynamic CSS in the plugin settings. The map CSS files related to Supreme Maps Module will only be loaded when they are needed on a page or a post. This means no bloat and fast loading times.

Dynamic CSS for Google Maps and Leaflet Maps

Only load CSS files related to Supreme Maps Module when they are needed on the page. This removes CSS files from the main bundle and improves load times.

Final words

If you tried the Divi Supreme Pro plugin, you know that you get extensive design options, all the features you need and a slim code base. You’ll also get regular updated and really good support when needed. The same goes for Supreme Maps Pro.

This is by far the most powerful map solution for Divi. I can highly recommend it.

Plugin rating:

Enter the discount code DIVIMUNDO in the checkout to get 10% off.

Related posts


Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.