How to add "MarkerClusterer"?

[asoltani927]

How can I add "MarkerClusterer" to map instance?

[HusamElbashir]

This is unfortunately not supported yet. But considering how popular this feature seems to be I'll look into adding it when I have some spare time.

[sagardspeed2]

@asoltani927 thanks for adding this request, I also need this functionality in my project. but it seems that it is not supported. @HusamIbrahim can you please share any status related this ?

@HusamIbrahim can you please mention that, what changes we need to make for use this functionality with this package ?

[vesper8]

@HusamIbrahim This package needs cluster support so badly.... please can you add it?

[HusamElbashir]

I'll hopefully take a stab at it this weekend

[HusamElbashir]

Added in v0.11.0. Basic syntax is:

<MarkerCluster>
  <Marker v-for="(location, i) in locations" :options="{ position: location }" :key="i" />
</MarkerCluster>

Documentation to be added soon

[vesper8]

@HusamIbrahim Thanks for adding this!

I've given it a try and can confirm it is working with regular markers. However it isn't working with custom markers from the vue3-gmap-custom-marker library

With regular markers I see the clusters but with the custom markers, which are otherwise working, when I add your MarkerCluster then all my custom markers just disappear

[HusamElbashir]

Hey @vesper8

So the custom markers are built with an OverlayView whereas the MarkerClusterer library we're using is expecting Marker's. Seems that the only way to get this to work is having the custom markers implement the Marker interface that MarkerClusterer expects. Reference: https://stackoverflow.com/questions/8297456/google-maps-v3-clustering-with-custom-markers

My plan is to add custom markers natively in this library seeing as it's such a popular feature. I'll hopefully have it support clustering as well.

[vesper8]

@HusamIbrahim That would be great if you could add custom markers natively.

Previously I was using gmap-vue in combination with vue2-gmap-custom-marker, and since gmap-vue has issues with their native clusters, I was actually pulling in the cluster from vue2-google-maps. Seems a bit chaotic.. yet somehow it just worked anyway.

Based on that, I would imagine that it would be possible to make your clusters work with vue3-gmap-custom-marker, or maybe that author would need to add support. Either way, as much as I need the cluster functionality, I cannot give up my custom markers so I will have to wait some more until this is possible.

Many thanks!

[HusamElbashir]

@vesper8 These libraries being forks might explain the compatibility in that case 🙂

I would try reaching out to vue3-gmap-custom-marker's author to see if he can make it work. The readme points to the lack of clustering support in this library but leaves open the possibility of adding support on their end: https://github.com/eregnier/vue3-gmap-custom-marker#features

Again this is only if you need it urgently. I'll have custom markers implemented natively in this library eventually.

[vesper8]

@HusamIbrahim I bet you could have custom markers implemented in 30 minutes ;-)

[HusamElbashir]

@vesper8 Custom markers added in v0.12.0 https://github.com/inocan-group/vue3-google-map#custom-marker