vue google maps FAQ

Frequently asked questions

Where is my google?

Symptoms: "ReferenceError: google is not defined"

Why this happens: The Google Maps API library is loaded asynchronously by vue-google-maps. Hence it is not immediately available even when the page is loaded. Fortunately, vue-google-maps provides you a Promise that is resolved when google is ready.

Solution:

import {loaded} from 'vue2-google-maps'

loaded.then(() => { var bounds = new google.maps.LatLngBounds() /* etc */ })

Reference: https://github.com/xkjyeah/vue-google-maps/issues/216

How do I talk to my map?

Symptoms:

• You want to create a Map overlay, but don't know how to get reference to the map
• You want to create a HeatMap, but don't know how to get reference to the map
• You want to create markers manually for performance reasons, but don't know how to get a reference to the map

Solution: If you create your map like so:

<GmapMap ref="mymap" @click="doSomething()"></GmapMap>

Then you can refer to the map object:

methods: {
  doSomething () {
    this.$refs.mymap.$mapObject.panTo({lat: 70, lng: 0}) // If you don't want to use the `zoom` property
  }
}

$mapObject is not defined

Symptom: If you are trying to do something like this:

mounted () {
  this.$refs.mymap.$mapObject.panTo(ORIGIN)
}

and get an error.

Why this happens: It's because it still takes time for the library still needs to wait for loaded, and then it needs another cycle of the event loop before it can say, this.$mapObject = new google.maps.Map().

Therefore, do this:

mounted () {
  this.$refs.mymap.$mapPromise.then(() => {
    this.$refs.mymap.$mapObject.panTo(ORIGIN)
  })
}

Reference: https://github.com/xkjyeah/vue-google-maps/issues/294