Extending Components

MapComponent API

A MapComponent inherits from Vue, and additionally supports the following:

MapComponent

Mixins

• DeferredReady: provides deferredReady hook

Hooks

• deferredReady: Returns Promise | value. In a MapComponent, deferredReady is not called until vm.$map has been set to the google.maps.Map instance.

Properties

• $map: The google.maps.Map object of its nearest Map ancestor. This is only guaranteed to be available at deferredReady, not at ready.

DeferredReadyMixin

Hooks:

• deferredReady: Returns Promise | value. Called after ancestors' deferredReady has been called, and if they return Promises the Promises have been resolved. If a Promise is returned, its descendents' deferredReady will not be called until the Promise is resolved.

Write your own Maps components!

It is easy to write new Google Maps components! (or components that depend on Google Maps). An example is shown in examples/overlay.html.

Simple put, create a new component by extending the MapComponent provided for you:

import {MapComponent} from 'vue-google-maps'
Vue.component('ground-overlay', MapComponent.extend({
    deferredReady: function() {

    }
}));

If you need to refer to the google.maps.Map object, use vm.$map, e.g.:

deferredReady: function() {
    this.$myComponent = new google.maps.Some.NewComponent({
        ...
        map: this.$map
    })
}

Explaining deferredReady

In Vue, if you have component A, which has child component B, which has child component C, the ready hooks are called in the following order:

C::ready --> B::ready --> A::ready

Unfortunately, the Google Maps API can only be initialized at or after A::ready. To fix this, we have added a new hook deferredReady that fires either (1) after the promises returned by its ancestors' deferredReady have resolved, or (2) after the component's ready has completed, if none of its ancestors support deferredReady.

deferredReady support can be mixed into any component through the DeferredReadyMixin:

import {DeferredReadyMixin} from 'vue-google-maps'
Vue.component('some-component', { mixins: [DeferredReadyMixin] })

deferredReady allows a component to ensure that its ancestor's asynchronously loaded dependencies have been loaded. To use the example of clustered markers:

Map::ready
--> Map::deferredReady (returns Promise that is resolved when Google Maps is loaded)
--> (idle)
--> *maps loaded*
--> MarkerClusterer::deferredReady : new MarkerClusterer({... map: this.$map ...})
--> Marker::deferredReady : $clusterObject.addMarker( new google.maps.Marker({ ... map: this.$map ... }) )