Feature: GmapCluster - Allow passing options to MarkererClusterer

[alisspers]

Is your feature request related to a problem? Please describe.

The GmapCluster component works great but doesn't allow customizing the end result. Specifically, we'd like to change the colors of the cluster icons to follow our site's color palette.

Describe the solution you'd like

A way to pass in the options allowed by MarkerClusterer to the GmapCluster component. We probably need the renderer option for our use case but all options would probably be good to support.

Describe alternatives you've considered

None other than trying to pass in an :options prop to GmapCluster and setting renderer there, but with no luck.

Additional context

Using an old version of gmap-vue (which used the markererplus package), we leveraged custom png:s for the cluster icons to achieve the following:

With the new version we get this result (which is functionally OK but not as good looking when seen in the context of our website):

[diegoazh]

Hi @alisspers did you try with the options prop? with that option you can set the properties of Google Map objects that we didn't map to Vue props. I mean for example with the InfoWindow component before v3.4.3 we didn't have a content prop but you could set it using the options prop like below

<template>
    <gmap-map :center="center" :zoom="15" style="width: 100%; height: 500px">
      <gmap-info-window
        :content="newOptionContent"
        :options="{
          content: 'this is my info window content',
        }"
        :position="infoWindowPos"
        :opened="infoWinOpen"
        @closeclick="infoWinOpen = false"
      ></gmap-info-window>

      <gmap-marker
        :key="i"
        v-for="(m, i) in markers"
        :position="m.position"
        :clickable="true"
        @click="() => toggleInfoWindow(m, i)"
      ></gmap-marker>
    </gmap-map>
<template>

Please can you try with the option prop first and let me know if that prop doesn't allow you to set the render property of MarkerClusterer.

[alisspers]

Yes, I tried that already (I think). This is what I tried, which doesn't seem to make any difference:

<GmapCluster :options="clusterOptions">
<!-- ... -->
</GmapCluster>

And clusterOptions looks like this (renderer copied from Googles examples):

       clusterOptions() {
            return {
                renderer: ({ count, position }) =>
                    new google.maps.Marker({
                        label: { text: String(count), color: 'white', fontSize: '10px' },
                        position,
                        // adjust zIndex to be above other markers
                        zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
                    }),
            };
        },

I looked closer at the source code here. In this part of cluster-icon.vue, it seems like the only options being propagated to the MarkerClusterer are map and markers, right?

[diegoazh]

Try to execute the function because the prop expects a litteral object not a function reference, I mean

<GmapCluster :options="clusterOptions()">
<!-- ... -->
</GmapCluster>

[alisspers]

Thanks for getting back! Sorry, I forgot to mention that I had "clusterOptions" as a computed property in my example above.
I've also tried having it in a data property (plaing object) as well as hardcoding it into <GmapCluster :options="{ renderer: ... }">. No luck I'm afraid.

Did you take a look at those lines of code I linked? L58-L63 in cluster-icon.vue
It seems to me that not the whole options object is passed, just map & markers?

[diegoazh]

@alisspers you're right, I'll fix it right now.

[create-issue-branch]

Branch issue-255-Feature_GmapCluster_-_Allow_passing_options_to_MarkererClusterer created!

[github-actions]

🎉 This issue has been resolved in version 3.4.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[diegoazh]

@alisspers can you test the new version and confirm if this component is working as expected?

[alisspers]

It didn't, but I've found another bug that causes it not to work. The prop specification states "algorithm" instead of "options" for the prop name: https://github.com/diegoazh/gmap-vue/blob/master/packages/gmap-vue/src/components/cluster-icon.vue#L93-L100

I changed that locally and tried again, then it works!

[diegoazh]

🤦 you're right again. My bad 🙇‍♂️.

[diegoazh]

@alisspers finally I added the options prop but also render and onClusterClick props were added too on new v3.5.1. Thanks again and let me know if it's working now.

[Anjgpt]

@alisspers does this work for you? I'm passing options and not able to apply the custom style.

<gmap-cluster
      :options="clusterOptions()"
    >
...
</gmap-cluster>

clusterOptions() {
      return {
        renderer: ({ count, position }) => new google.maps.Marker({
          label: { text: String(count), color: 'white', fontSize: '10px' },
          icon: VesselCluster,
          position,
          // adjust zIndex to be above other markers
          zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        }),
      };
    },

getting this error Uncaught TypeError: this.renderer.render is not a function

[alisspers]

@diegoazh sorry I forgot to update you here – it works great for me now. Really appreciate your work and your quick response to my issue.

@Anjgpt the "renderer" option must be an object. In your case, it should be a plain JS object with a method called "render". Then it works!
Like this:

    clusterOptions() {
            return {
                renderer: {
                    render: ({ count, position }) => new google.maps.Marker({
                        label: { text: String(count), color: 'white', fontSize: '10px' },
                        icon: VesselCluster,
                        position,
                        // adjust zIndex to be above other markers
                        zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
                    }),
                },
            };
        }

[Anjgpt]

Thanks, @alisspers for the quick response really appreciate it. It works now.

[jesscostello]

Should the changes above allow setting options on the cluster object or just allow adding rendering options? I have tried adding options to the cluster object but they don't seem to be picked up at all
<gmap-cluster :options="{ minPoints: 2, maxZoom 10, }">

[diegoazh]

In that case, we only added the renderer option to the defined props @jesscostello, on the other hand, the way you are using the options prop is correct; finally, I strongly recommend moving to the new version of this plugin for Vue 3, in that version we defined all cluster options as available props on the component.

[jesscostello]

@diegoazh thanks for confirming! In this case unfortunately the project I was working on had to stick on Vue 2 for the time being