Currently, I am in the process of learning how to calculate the distance between two points using Google Maps and Vue.js. While trying to test some initial code, I keep encountering errors such as: TypeError: Cannot read property 'LatLng' of undefined
I am facing difficulty in understanding why Vue is not recognizing 'Google' or 'Geometry' for what seems like a straightforward task. I have made sure to reference 'Geometry' in Main.js, but so far no success. Although I believe that I am referencing Google correctly based on my readings, being a beginner, anything is possible.
<template>
<div>
<button class='btn-primary' @click='filt'>Filter</button>
</div>
</template>
<script>
import * as VueGoogleMaps from 'vue2-google-maps';
export default {
name: "Distance",
data: () => {
return {
placeholder: "enter location",
center: {lat: 34.503441, lng: -82.650131},
targetLoc: { lat: 11.31, lng: 123.89 },
} //ends return
}, //end data
methods: {
filt () {
this.center = new VueGoogleMaps.gmapApi.maps.LatLng(-36.874694, 174.735292)
this.targetLoc = new VueGoogleMaps.gmapApi.maps.LatLng(-36.858317, 174.782284)
let distance = VueGoogleMaps.gmapApi.maps.geometry.spherical.computeDistanceBetween(this.center, this.targetLoc)
console.log(distance)
},
},
}
</script>
Main.js snippet:
libraries: 'places,drawing,geometry',
The snippet above leads to a console error: Error in v-on handler: "TypeError: Cannot read property 'LatLng' of undefined" I would greatly appreciate any assistance with this issue.