How to change font color of google maps marker clusterer

javascript css google-maps google-maps-api-3 markerclusterer

24,391

Solution 1

You can check this Documentation for Marker Clusterer under class ClusterIconStyle

There is an option named textColor which sets the color of the label text shown on the cluster icon.

Solution 2

A working JSFIDDLE to change the font properties of the clustermarker. Below is the code:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MarkerClusterer v3 Simple Example</title>
    <style >
      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }
      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
    <script type="text/javascript" src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>

    <script>
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 100; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var mcOptions = {
            //imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m',
          styles:[{

          url: "https://googlemaps.github.io/js-marker-clusterer/images/m1.png",
                width: 53,
                height:53,
                fontFamily:"comic sans ms",
                textSize:15,
                textColor:"red",
                //color: #00FF00,
          }]

        };
        var markerCluster = new MarkerClusterer(map, markers, mcOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>
    <h3>A simple example of MarkerClusterer (100 markers)</h3>
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>

Here is the API reference link for more options and customizations.

Solution 3

You can pass just one element in styles option, like this

var options = {
    maxZoom: 15,
    styles:[{
        url: 'https://googlemaps.github.io/js-marker-clusterer/images/m1.png',
        width: 53,
        height: 53,
        textColor: '#fff',
    }]

};
var mc = new MarkerClusterer(map, markers, options);

but in this case you will have one img for all cluster sizes (1-10-100). Better to pass 5 elements. One for each cluster size, but it's too many rows of code (I've 3 clusterers on the map).

So for me works this

var mc = new MarkerClusterer(map, [], {
    imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m',  
    maxZoom: 15  
});
mc.setStyles(mc.getStyles().map(function (style) {
    style.textColor = '#fff';
    return style;
}));
mc.addMarkers(markers)

24,391

Author by

Admin

Updated on May 06, 2020

Comments

Admin about 4 years

Could anybody please tell me how to change the font color of a markerclusterer marker. This is my current code for styling the marker

mcOptions = {styles: [{
                height: 27,
                url: "image.png",
                width: 35
                }],
                maxZoom: 8
                }

var markerCluster = new MarkerClusterer(map, markers, mcOptions);

zur4ik almost 10 years

Thats what I wanted! :) 10x!
Brett Gregson about 7 years

Updated the broken link (2017)
Kevin almost 7 years

Thank you for the web archive reference link. The reference page that was ported to GitHub seems to have been truncated part of the way down.
AmerllicA over 5 years

please write some description for your answer. the OP should know about your codes. thanks.
Vasilii Suricov over 5 years

@BrettGregson i think this is right link raw.githubusercontent.com/googlemaps/v3-utility-library/mast‌er/…
Vasilii Suricov over 5 years

htmlpreview.github.io/?https://github.com/googlemaps/…
Kamlesh over 4 years

your fiddle did not help me but i used your code to solve my problem. Thanks. var mcOptions = { //imagePath: 'googlemaps.github.io/js-marker-clusterer/images/m', styles:[{ url: "googlemaps.github.io/js-marker-clusterer/images/m1.png", width: 53, height:53, fontFamily:"comic sans ms", textSize:15, textColor:"red", //color: #00FF00, }] };
Raphaël Balet almost 2 years

textColor doesn't seems to exists in the latest version anymore. Somebody have an Idea of the new solution?