[Vuejs]-Vue Google Maps Undefined Errors

by

0👍

I’ve changed your setup to this:

<template>
  <div>
    <div><button class='btn-primary' @click='filt'>Filter</button></div>
  </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 },
        }
    },
    computed: {
       google: VueGoogleMaps.gmapApi
    },
    methods: {
       filt () {
          this.$gmapApiPromiseLazy().then(() => {
             this.center = new this.google.maps.LatLng(-36.874694, 174.735292) 
             this.targetLoc = new this.google.gmapApi.maps.LatLng(-36.858317, 174.782284) 
             let distance = new this.google.maps.geometry.spherical.computeDistanceBetween(this.center, this.targetLoc) 
             console.log(distance)
          });
       },
    },
}
</script>

this.$gmapApiPromiseLazy().then(() makes sure that the gmap object is ready to use and computed: { google: VueGoogleMaps.gmapApi }, makes code cleaner

Leave a comment