[Resolved] Is it possible to change the font size of text within a cluster marker?

[Author]

Posts

[diyanK]

I am using the following code to customise my cluster markers:

Can I change the font size of clusters (the numbers are too small for my linking).

jQuery( document ).ready( function() {
  var options = {
    styles: [
      {
        'url': '<em><u>hidden link</u></em>',
        'height': '65',
        'width': '65',
        'textColor': '#000'
      },
      {
        'url': '<em><u>hidden link</u></em>',
        'height': '75',
        'width': '75',
        'textColor': '#000'
      },
      {
        'url': '<em><u>hidden link</u></em>',
        'height': '85',
        'width': '85',
        'textColor': '#000'
      }
    ],
    calculator: function( markers, numStyles ) {
      var index = 0, count = markers.length, dv = count, result = {};
      while (dv > 0) {
        dv = parseInt(dv - 5, 10);
        index++;
      }
      index = Math.min(index, numStyles);
      result = {
        text: count,
        index: index
      };
      return result;
    }
  };
  WPViews.view_addon_maps.set_cluster_options( options, 'map-general' );
});

[Christian Cox]

Yes, you can use the 'textSize' property in the style definitions, like this:

jQuery( document ).ready( function() {
  var options = {
    styles: [
      {
        'url': '<em><u>hidden link</u></em>',
        'height': '65',
        'width': '65',
        'textColor': '#000',
        'textSize': 36
      },
      {
        'url': '<em><u>hidden link</u></em>',
        'height': '75',
        'width': '75',
        'textColor': '#000',
        'textSize': 36
      },
      {
        'url': '<em><u>hidden link</u></em>',
        'height': '85',
        'width': '85',
        'textColor': '#000',
        'textSize': 36
      }
    ],
    calculator: function( markers, numStyles ) {
      var index = 0, count = markers.length, dv = count, result = {};
      while (dv > 0) {
        dv = parseInt(dv - 5, 10);
        index++;
      }
      index = Math.min(index, numStyles);
      result = {
        text: count,
        index: index
      };
      return result;
    }
  };
  WPViews.view_addon_maps.set_cluster_options( options, 'map-general' );
});

[diyanK]

Hah! Funny part is - I actually tried this when trying to figure it out own, but I used the code with the single quotes (like we have it for width and height) - '36'.

Where I can find the full documentation of these properties with the proper syntax?

Thanks!

[diyanK]

Sorry to reopen, just wanted to make sure my final question about the documentation of style syntax for these options gets answered.

[Christian Cox]

I'm not sure where the documentation for each attribute exists, but I found textSize in an example provided by Google here: https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/examples/advanced_example.html

[diyanK]

I see, looks like this is part works on Google's side.. anyway, great job! Let's close this one.