v3-gmaps Docs

Heatmap (gmaps-heatmap)

The Heatmap is a great way to show fuzzy data in a colorful way.

WARNING

gmaps-heatmap relies on the additional visualization library. You can see how to include that in Configuration.

Simple Use (demo) 

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

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

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

Props

PropsTypeDefaultDescription
options*GmapsHeatmapOptions-Object used to define the properties of a gmaps-heatmap.
dataGmapsWeightedPosition[]-Sets the Heatmap data points.

* To see all of the possible options, have a look at the Google Maps HeatmapLayerOptions interface.

Events

EventTypeDescription
mountedgoogle.maps.visualization.HeatmapLayerOn mounted the component will emit the Google Maps object it represents.
unmountedgoogle.maps.visualization.HeatmapLayerOn unmounted the component will emit the Google Maps object it represents.

Notes

  • While regular GmapsPosition ({ lat, lng }) data points can be used, the Heatmap can also use weighted points: { lat, lng, weight } which can add an extra dimension to your data.