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
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
- 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
$19.00 $17.10 for 1 year on 1 website.
$39.00 $35.10 for 1 year on unlimited websites.
$79.00 $71.10 for life-time on unlimited websites.
Installing the plugin
- Purchase Supreme Maps Pro at Divi Supreme
Enter the code DIVIMUNDO in the checkout for 10% discount
- Download the plugin ZIP file
- Log in to your WordPress dashboard
- Go to Plugins » Add new and click Upload Plugin
- Upload and activate the plugin.
- 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.
Add your license key
- From your WodPress dashboard, go to Supreme Maps » License
- Add your license key in the field License Key and click Save & Activate License Key
Now you have access to automatic plugin updates.
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.
1. The Leaflet Map Is Light As Feather
There are two reasons to choose a Leaflet map over a Google map:
- 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.
- 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 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.
Example of a Google Map created with Supreme Maps Pro. In the middle you can see a marker cluster with three markers.
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.
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.
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.