v3-gmaps Docs

Cluster (gmaps-cluster)

The Cluster is an alternative to the heatmap when showing lots of data efficiently.

Simple Use (demo) 

<template>
  <div style="height: 500px">
    <gmaps-cluster :data="data" />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { gmapsMap, gmapsCluster } from 'v3-gmaps';

export default defineComponent({
  components: { gmapsMap, gmapsCluster },
  setup() {
    const items = {
      { lat: 37, lng: 56 },
      { lat: 15, lng: 108 },
      ...
    }
    return { items }
  }
});
</script>

Props

PropsTypeDefaultDescription
options*GmapsClusterOptions-Object used to define the properties of a gmaps-cluster.
itemsGmapsClusterItem[]-Sets the Cluster data points.

Events

EventTypeDescription
clickGmapsPositionThis event is fired a Marker icon is clicked.

Notes

  • This is a custom component and not available using only the Google Maps API.
  • The way it works is completely custom, and uses the Google Map Tiles to cluster points rather than more complex algorithms others have used.
  • Google has an additional package which it recommends for doing this. This package has improved a lot and may be added into an alternative clustering component in the future.
  • GmapsClusterItem's can be given an onClick and onContextmenu callback property in the form: (position: GmapsPosition) => void.