NathanAP / vue-google-maps-community-fork

The community fork for Vue Google Maps library
https://vue-google-maps-community-fork.netlify.app
MIT License
108 stars 32 forks source link

What is the expected input for GMapCluster's styles prop? #97

Open ivan006 opened 6 months ago

ivan006 commented 6 months ago

This props https://vue-google-maps-community-fork.netlify.app/components/cluster.html#styles

Im doing everything by the book and passing it what I understand to be correct configs but it doesnt take effect at all


[
    {
        "textColor": "red",
        "textSize": 16,
        "anchorText": [
            1.5,
            1
        ],
        "height": 40,
        "width": 40
    },
    {
        "textColor": "red",
        "textSize": 16,
        "anchorText": [
            1.5,
            1
        ],
        "height": 40,
        "width": 40
    },
    {
        "textColor": "red",
        "textSize": 16,
        "anchorText": [
            1.5,
            1
        ],
        "height": 40,
        "width": 40
    },
    {
        "textColor": "red",
        "textSize": 16,
        "anchorText": [
            1.5,
            1
        ],
        "height": 40,
        "width": 40
    },
    {
        "textColor": "red",
        "textSize": 16,
        "anchorText": [
            1.5,
            1
        ],
        "height": 40,
        "width": 40
    }
]
IBakeCookies commented 3 months ago

Its because the whole documentation is wrong lol. This is the props I see on the cluster.vue component

const props = {
  algorithm: {
    type: Object,
    default: new SuperClusterAlgorithm({}),
    noBind: true,
  },
  renderer: {
    type: Object,
    default: new DefaultRenderer(),
    noBind: true,
  },
}

Edit: Sorry I forgot to answer the question... To style it, you need to use the renderer.

const renderer = {
    render({ count, position }) {
        return new google.maps.Marker({
            label: {
                text: String(count),
                color: 'white',
                fontSize: '10px',
            },
            position,
            icon: {
                url: '/icon/map-pointer.webp',
                scaledSize: {
                    width: 24,
                    height: 24,
                    equals: () => true,
                },
            },
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        });
    },
};
<GMapCluster :renderer="renderer">
julianlangweb commented 3 months ago

Thank you @IBakeCookies was struggling aswell to style the cluster icons. works perfect