Google Map Clusters are a great feature in Google Maps which can enrich your Divi Machine Maps with multiple pins in a cluster. This snippet shows you how to change the look of your Google Map Clustered Pins in Divi Machine. We use a combination of images and CSS filters to customize the look, so dig in below for more details on how to use this Divi Snippet.
CSS for various filters can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#syntax
Description:
This code will change the image. Change the example image URL in the code with one that you have uploaded in your media library.
Language: CSS
Where to add: Divi Theme Options
.et_pb_map div[style*="background-image"][style*="markerClusterer/m"][style*=".png"] {
background-image: url(https://picsum.photos/56) !important;
}
Description:
This CSS will keep the same icon but will change the hue of it.
Language: CSS
Where to add: Divi Theme Options
.et_pb_map div[style*="background-image"][style*="markerClusterer/m"][style*=".png"] {
filter: hue-rotate(73deg);
}
Description:
You can combine multiple filters like this.
Language: CSS
Where to add: Divi Theme Options
.et_pb_map div[style*="background-image"][style*="markerClusterer/m"][style*=".png"] {
filter: hue-rotate(73deg) grayscale(5%) contrast(10) saturate(.8);
}
Description:
This CSS lets you change the color of the number to white. Change "white" to any hexadecimal or accept CSS colors.
Language: CSS
Where to add: Divi Theme Options
.et_pb_map div[style*="background-image"][style*="markerClusterer/m"][style*=".png"] {
color: white !important;
}
Description:
You can combine the filters and text color in a single CSS block.
Language: CSS
Where to add: Divi Theme Options
.et_pb_map div[style*="background-image"][style*="markerClusterer/m"][style*=".png"] {
filter: hue-rotate(73deg) grayscale(5%) contrast(10) saturate(.8);
color: white !important;
}
Easy | CSS
Feb 29 2024
Easy | CSS
Feb 21 2024
Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.
Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active
From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.
Filter WooCommerce, Posts & Custom Posts without reloading the page.
Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.
Divi Mobile helps you create beautiful looking mobile menus without having to code.
A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.
Give your Divi website that extra boost of speed with our Divi Nitro plugin to enhance your customer's experience.
Password protect the content of your Divi website with our Divi Protect plugin. Keep unwanted eyes out!
Improve the user experience of your Divi website with our Divi Mega Menu plugin by creating dynamic menus using the Divi Builder.
