markerclusterer: anchor offset for cluster icons
The proper way to do it is to adjust the anchorIcon
property like this:
var clusterStyles = [
{
height: 64,
width: 53,
anchorIcon: [20, 140]
},
{
height: 64,
width: 53,
anchorIcon: [20, 140]
},
{
height: 64,
width: 53,
anchorIcon: [20, 140]
}
];
var mcOptions = {
styles: clusterStyles
};
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
The accepted answer does not work well enough for me - adding transparent space to the icon image can change the way click and hover events behave due to the increased size of the object.
I would use the anchorIcon
property except it's only available in Marker Clusterer Plus, not the other Marker Clusterer plugin (which I'm using).
For those that specifically want to use Marker Clusterer - you can override ClusterIcon.prototype.getPosFromLatLng_
. The ClusterIcon
object is global, so we can modify it at the top-level of any script file without messing with the plugin's source code.
This will anchor the marker to the bottom of the icon:
ClusterIcon.prototype.getPosFromLatLng_ = function (latlng) {
var pos = this.getProjection().fromLatLngToDivPixel(latlng);
pos.x -= parseInt(this.width_ / 2);
pos.y -= parseInt(this.height_);
return pos;
};