inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
264 stars 50 forks source link

MarkerCluster not clustering stacked locations when zoomed in #196

Closed m2xilon closed 5 months ago

m2xilon commented 5 months ago

MarkerCluster does not cluster locations when zoom is high enough (zoom: 17 and higher for me). This is observable in the MarkerCluster example with just one addition: duplicate any location in the locations object in setup. MarkerCluster at zoom 16 MarkerCluster at zoom 16 MarkerCluster at zoom 17 MarkerCluster at zoom 17

Use case: multi-story buildings. Different floors for companies but same address. When zoomed in only one of the markers shows. If you were to use InfoWindow any click events would be for a single marker. This used to work in Vue 2 GmapCluster with grid-size prop and @click listener like so: <GmapCluster :grid-size="1" :zoom-on-click="zoom < 17" @click="zoom >= 17 ? openLocationPopupMulti($event) : undefined"

Any input on this is appreciated, cheers

m2xilon commented 5 months ago

I was not using this correctly for my case, solved by explicitly defining algorithm.

<MarkerCluster
  :options="{
    algorithm,
  }"
  @click="onclickFunc($event)"
  >
    <GmapMarker
      v-for=....
import { SuperClusterAlgorithm } from '@googlemaps/markerclusterer'
setup() {
  return {
     algorithm: new SuperClusterAlgorithm({
        radius: 40,
        maxZoom: 19,
        generateId: false
      }),
  }