How to change font color of google maps marker clusterer

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.


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.


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)

Tags:

Javascript

Css

Google Maps

Google Maps Api 3

Markerclusterer

Recent Posts