How to use Marker Clusterer Plus on a google map with retina images

Question

I'm using Marker Clusterer Plus to group markers on a google map but the enableRetinaIcons option does not seem to work.

// Custom style to alter the default font color (style is always the same).
var styles = [
    {
        url: 'PATH_TO_MY_66x66px_IMAGE',
        textColor: '#ddddd',
        textSize: 18,
        width: 33,
        height: 33,
    }
];

// Calculator function to determine which style to use (I only have one)
var calculator = function (markers, iconstyles){
    return{ text: markers.length.toString(), index:1};
};

// Set Options
var clusterOptions = {
    title: 'Cluster Title',
    enableRetinaIcons: true,
    styles: styles,
    calculator: calculator
}

// Add to map
new MarkerClusterer(this.map, this.markers, clusterOptions);

---

The enableRetinaIcons option does not seem to work, the image is shown twice the size.

Setting the width to 66x66px does not help either.

Does someone know how to configure this properly?

Answer 1

This is apparently bug in Marker Clusterer Plus. The only place in code where they actually use this option is here:

img = "<img src='" + this.url_ + "' style='position: absolute; top: " + spriteV + "px; left: " + spriteH + "px; ";
if (!this.cluster_.getMarkerClusterer().enableRetinaIcons_) {
  img += "clip: rect(" + (-1 * spriteV) + "px, " + ((-1 * spriteH) + this.width_) + "px, " +
      ((-1 * spriteV) + this.height_) + "px, " + (-1 * spriteH) + "px);";
}
img += "'>";

So they in fact only disable the clipping for sprite icons, but they don't actually run the required retina action. The HTML tree of the icon actually looks like this:

so you can see that the div surrounding the icon has proper dimensions set (33x33), but the very image (the blue code) doesn't have any dimensions set.

I tried to fix the problem by patching the marker clusterer library, just by adding an else branch:

img = "<img src='" + this.url_ + "' style='position: absolute; top: " + spriteV + "px; left: " + spriteH + "px; ";
if (!this.cluster_.getMarkerClusterer().enableRetinaIcons_) {
  img += "clip: rect(" + (-1 * spriteV) + "px, " + ((-1 * spriteH) + this.width_) + "px, " +
      ((-1 * spriteV) + this.height_) + "px, " + (-1 * spriteH) + "px);";
}
else {
    img += "width: " + this.width_ + "px;" + "height: " + this.height_ + "px;";
}
img += "'>";

It seems to work:

Complete patched library @pastebin

Test example - http://jsfiddle.net/Rt28T/2/

You can report a bug and add this as a proposed patch :-)

Answer 2

I know this question has been answered, but another way to solve this issue (and probably easier) is just using an SVG marker icon. That way:

• Your solution will support any device pixel density
• You don't need to patch the library (with all the problems it can cause)
• The current browser support is quite good — check caniuse.com svg-img for browser stats

Answer 3

Just upload the icons twice the size:

m1.png = 53x53 (normal) 106x106 (retina)
m2.png = 56x56 (normal) 112x112 (retina) 
m3.png = 66x66 (normal) 132x132 (retina)
m4.png = 78x78 (normal) 156x156 (retina)
m5.png = 90x90 (normal) 180x180 (retina)

And add to your CSS:

#map .cluster img {
    max-width: 100%;
}