Search code examples
javascriptgoogle-mapsmarkerclusterer

Markerclustrerplus style will not center

iam using this npm package

https://github.com/googlemaps/js-markerclustererplus

Iam trying to center the style and this is how.

let clusterStyle = {
            textColor: 'white',
            textSize: 14,
            url: iconBase + 'pin-cluster-store.png',
            width: 45,
            height: 49
        }


let mc = new MarkerClusterer(map,mapMarkers, {
           maxZoom: 15,
           gridSize: 50,
           styles: clusterStyles
});

This is how it looks

marker clustrer

I want it to be center of the circle. Whwn i add padding-top 16px in the console it works fine. But when i add it programatically in the "clusterstyle" nothing happends

Solution

  • You will need to adjust the anchors. https://googlemaps.github.io/js-markerclustererplus/interfaces/ClusterIconStyle.html

    anchorIcon?: [number, number]

    The anchor position (in pixels) of the cluster icon. This is the spot on the cluster icon that is to be aligned with the cluster position. The format is [yoffset, xoffset] where yoffset increases as you go down and xoffset increases to the right of the top-left corner of the icon. The default anchor position is the center of the cluster icon.

    anchorText?: [number, number]

    The position (in pixels) from the center of the cluster icon to where the text label is to be centered and drawn. The format is [yoffset, xoffset] where yoffset increases as you go down from center and xoffset increases to the right of center. The default is [0, 0].