To use a pre-loaded Google Maps API, passfalse to theload option:

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

When Google Maps has been loaded, run the following:

window.vueGoogleMapsInit(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 byvue-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 whengoogle is ready.

Solution:

this.$gmapApiPromiseLazy().then(()=>{varbounds=newgoogle.maps.LatLngBounds()/* etc */})

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 tocreate 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}}

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 forloaded, andthen 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

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 anInfoWindow is open is controlled by itsopened prop. Therefore write:

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

Why so complicated? TheInfoWindow is a separate component fromMarker. ThereforeMarkershould not be modifying the internal state ofInfoWindow.To put this more concretely, you can close theInfoWindow by setting:opened="false", but theInfoWindow 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 likeinfoWindowShown in the parent.