How to change the color of marker clusters / display an icon below clusters

The colors of the marker clusters can be changed via CSS only. Please add the following CSS styles to the end of your theme´s style.css and adjust the colors accordingly.

A tool for getting the color values in rgba can be found at https://www.hexcolortool.com/ – please be aware that the last number is the transparency value, reaching from 0 to 1:


.marker-cluster-small {
background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 0.6);
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6);
}
.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6);
}

As an alternative you can also use hex color codes like #C0C0C0.

If on the other hand you want to add a custom icon below a cluster, see the following example as reference (use your own URLs to icons please):


.marker-cluster-small::after {
content: "";
display: inline-block;
height: 36px;
width: 36px;
background: url('https://www.mapsmarker.com/wp-content/uploads/maps-marker-pro/icons/hospital-building.png') no-repeat;
}

Example output:

1
0
13140
Rate this user guide

You are not allowed to rate this post.

2 Responses to “How to change the color of marker clusters / display an icon below clusters”

    Hello,
    i change the colors of cluster marker. But now i can not read the number in the marker.
    How to change color of number in cluster marker?

    Regards
    Wolfram

      Hi Wolfram,

      to change the number in the marker cluster, add the color CSS property to desired cluster style, e.g.

      .marker-cluster-medium div {
      color: #000;
      background-color: rgba(240, 194, 12, 0.6);
      }

      best,

      Robert

Comments or further questions?

If you're looking for technical support please click here, for all other questions please use our contact form to get in touch! We´re looking forward to hearing from you!

Your Maps Marker Pro team

en English
X