How to get reference to google map object inside a VueJs component?

Question

This is my VueJs component:

<template>
  <div>
    <gmap-map ref="map" :center="center" @click="captureClickedLocation" :zoom="10">
    </gmap-map>
  </div>
</template> 

How to get the reference to the current map object here, in order to use it with a google.maps.drawing.DrawingManager to display custom overlays, for example ?

Example code would be sth like this

var drawingManager = new google.maps.drawing.DrawingManager({
                        drawingMode: google.maps.drawing.OverlayType.MARKER,
                        drawingControl: true,
                        drawingControlOptions: {
                            position: google.maps.ControlPosition.TOP_CENTER,
                            drawingModes: [
                                google.maps.drawing.OverlayType.CIRCLE,
                                google.maps.drawing.OverlayType.POLYGON,
                                google.maps.drawing.OverlayType.RECTANGLE
                            ]
                        },
                        markerOptions: {
                            icon: 'images/beachflag.png'
                        });
drawingManager.setMap(map); 

How to get the reference to the gmap-map's map object? or, what would be the value for map in the last line ?

PS: I'm using vue-google-maps from https://github.com/xkjyeah/vue-google-maps, which is vue wrapper for google maps.

Answer 1

this.$refs.map.$mapObject or this.$refs['map'].$mapObject