vue google maps FAQ

Frequently asked questions

I / Another package is already loading Google Maps! How do I use that instance of Google Maps instead?

To use a pre-loaded Google Maps API, pass false to the load option:

Vue.use(VueGoogleMaps, {load: false})

When Google Maps has been loaded, run the following:

window.vueGoogleMapsInit(google)

Where is my google?

Symptoms:

• "ReferenceError: google is not defined"
• How do I use Google Places service?
• How do I use Google Directions service?

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:

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

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

The InfoWindow is not opening when I click the marker!

Symptoms: You have something like this: <GmapMarker><GmapInfoWindow /></GmapMarker>, but clicking the marker does not open the info window!

Why this happens (TL;DR): whether an InfoWindow is open is controlled by its opened prop. Therefore write:

<GmapMarker @click="infoWindowShown = true">
  <GmapInfoWindow :opened="infoWindowShown" @closeclick="infoWindowShown = false">
</GmapMarker>

Why so complicated? The InfoWindow is a separate component from Marker. Therefore Marker should not be modifying the internal state of InfoWindow. To put this more concretely, you can close the InfoWindow by setting :opened="false", but the InfoWindow can also itself (if you click on the X). The only way to ensure that both parent and child can see a consistent state of the info window, is to define a variable like infoWindowShown in the parent.