Heatmap

[Julius-Bendt]

Describe what you're reporting I'm trying to use the heatmap feature of the package.

How can we reproduce it? Find the heatmap section in the readme file, and set the project up accordingly.

I'm using this code, for quick copy/paste:

<template>
  <GMapMap ref="myMapRef" :center="center" :zoom="zoom" style="width: 100%; height: 600px">
    <GMapHeatmap :data="heatData"></GMapHeatmap>
  </GMapMap>
</template>

<script setup>
import { ref, watch } from 'vue'

const center = { lat: 52.2985593, lng: 104.2455337 }
const zoom = 12
const myMapRef = ref()
const heatData = ref([])

watch(myMapRef, (googleMap) => {
  if (googleMap) {
    googleMap.$mapPromise.then((map) => {
      heatData.value = [{ location: new google.maps.LatLng({ lat: 52.2985593, lng: 104.2455337 }) }]
      console.log(heatData.value)
    })
  }
})
</script>

What were your expecting to happen? I'm expecting some kind of heatmap.

What happened? I get an error from the heatmap component:

the code from heatmap.js:

export default buildComponent({
  mappedProps: props,
  name: 'heatmap',
  ctr: () => google.maps.visualization.HeatmapLayer, // error throw by HeatmapLayer
  events,
})

Device or enviroment os: Windows 10, browser: Chrome, npm version: 9.3.0 vue version: 3.2.47 package version: 0.3.1

[NathanAP]

Hello! Sorry for the delay answering.

This really seems wrong... I'll try to look into it and see why .visualization is now undefined. It might be something that changed with time.

edit: nevermind. Read next comment.

[NathanAP]

Ok, thats not a bug, you need to include visualization in your main.js.

This can be done by doing something like this:

app.use(VueGoogleMaps, {
    load: {
        key: "YOUR_KEY",
        libraries: "places,visualization",
    },
});

I'll see if this is in the docs. Otherwiser I'll add a clear explanation about this.

edit: please let me know if its working now :)

[Julius-Bendt]

You are right! I totally overlooked that part - my bad!

Thanks for the explanation and help

[NathanAP]

I'll see if I can add an error for those cases. Right now its not clear enough