Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ivan006 opened this issue May 12, 2024 · 2 comments
Open

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

ivan006 opened this issue May 12, 2024 · 2 comments

Comments

@ivan006
Copy link

ivan006 commented May 12, 2024

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
Copy link

IBakeCookies commented Jul 18, 2024

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants