when trying to trigger an action to take when an event occurs in the Maps Vue.js plugin for Google Charts (vue-google-charts), but the event never seems to fire. If I use another chart type the events are working properly, but not with Maps.
Below is a sample bit of code I tried - the map renders fine, but clicking on the map does not trigger the event. Any idea what I’m doing wrong?
<template>
<div class=”map”>
<h1>This is a map</h1>
<GChart
type=”Map”
:data=”chartData”
:options=”chartOptions”
:settings=”{ packages: [‘corechart’, ‘map’], mapsApiKey: ‘REDACTED’ }”
:events=”chartEvents”
/>
</div>
</template>
<script>
import { GChart } from ‘vue-google-charts’;
export default {
name: ‘map’,
components: {
GChart
},
data () {
return {
chartData: [
[‘Lat’, ‘Long’, ‘Name’],
[37.4232, -122.0853, ‘Work’],
[37.4289, -122.1697, ‘University’],
[37.6153, -122.3900, ‘Airport’],
[37.4422, -122.1731, ‘Shopping’]
],
chartOptions: {
chart: {
title: ‘A Map’,
}
},
chartEvents: {
‘click’: () => {
alert(‘click’)
}
}
}
}
}
</script>
Solution :
Found the problem after more digging. When using Maps via Google Charts the only two events that are available are “error” and “ready”. Events for click, drag, resize, etc are only available when using the Maps API directly.