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?
You can use custom SVG vector paths to define the visual appearance of markers. To do this, pass a Symbol object literal with the desired path to the marker's icon property. You can define a custom path using SVG path notation, or use one of the predefined paths in google. maps.
Answers. you can add 200 markers at a time but if you are using google service it will not response more than 10 or 20 at a time and if you have array of collection Lattitude and longitude just try to modify above code.
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 += "'>";
You can report a bug and add this as a proposed patch :-)
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With