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) !important;
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 0.6) !important;
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6) !important;
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6) !important;
}
.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6) !important;
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6) !important;
}

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: " ";
background: url('https://www.mapsmarker.com/wp-content/uploads/maps-marker-pro/icons/hospital-building.png');
height: 36px;
width: 36px;
background-repeat: no-repeat;
display: inline-block;
}

Example output:

1
0
12578
Rate this user guide

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 {
      background-color: rgba(240, 194, 12, 0.6) !important;
      color: #000;
      }

      best,

      Robert

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

en English
X