Question

87

Styling MarkerClusterer Icons?

rated 0 times [ 91] [ 4] / answers: 1 / hits: 82217 / 13 Years ago, thu, october 20, 2011, 12:00:00

I am using the MarkerCluster.js to create clustering in my google maps api. The clusters work how I want them however I want to style differently than yellow, blue and red circles. I was trying to use the MarkerStyleOptions and it says you have an array of styles with the smallest cluster icon first and the biggest last. I tried to create this below but I am getting really confused about what syntax to use and can't find any good examples.

var clusterStyles = [

    [opt_textColor: 'white'],

    [opt_textColor: 'white'],

    [opt_textColor: 'white']

];



var mcOptions = {

    gridSize: 50,

    styles: clusterStyles,

    maxZoom: 15

};

var markerclusterer = new MarkerClusterer(map, cluster, mcOptions);

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryder

Add To Favorites

Follow

Total Points: 473

Total Questions: 110

Total Answers: 91

Location: Northern Ireland

Member since Mon, Nov 14, 2022

2 Years ago

answered 13 Years ago austynp · Accepted Answer

What you need to do is use the url to specify which images to use instead of the blue/yellow/red images currently being used. And probably a good idea to include the height and width options too.

var clusterStyles = [

  {

    textColor: 'white',

    url: 'path/to/smallclusterimage.png',

    height: 50,

    width: 50

  },

 {

    textColor: 'white',

    url: 'path/to/mediumclusterimage.png',

    height: 50,

    width: 50

  },

 {

    textColor: 'white',

    url: 'path/to/largeclusterimage.png',

    height: 50,

    width: 50

  }

];