How to get marker position after dragging in vue2-google-map?

Question

I am using the vue2-google-map library to display a map with a marker.

<gmap-map ref="mymap" :center="mapStartLocation" :zoom="17" style="width: 100%; height: 300px">
    <gmap-marker v-on:change="updateCoordinates()" :position="mapStartLocation" :draggable="true" @closeclick="updateCoordinates()"/>
</gmap-map>

This works and puts the marker on the coordinates of mapStartLocation

How do I get the new coordinates after the user draggs the marker on the map?

I tried with a @closeClick and v-on:change but neither registers. Even if they would, the question of how to get the new coordinate values remains.

Any pointers on how to operate with this library. Nothing in the documentation.

Answer 1

I found @drag to be the best solution. However, the event is emitted while the user is dragging, not only after, to which @dragend should work according to source-code, but for some reason doesn't in my case.

<template>
    <gmap-map ref="mymap" :center="mapStartLocation" :zoom="17" style="width: 100%; height: 300px">
        <gmap-marker :position="mapStartLocation" :draggable="true" @drag="updateCoordinates" />
    </gmap-map>
</template>

<script>
export default {
    data() {
        return {
            coordinates: null,
        }
    },
    methods: {
        updateCoordinates(location) {
            this.coordinates = {
                lat: location.latLng.lat(),
                lng: location.latLng.lng(),
            };
        },
    },
}
</script>

Answer 2

So, You can add Event on stop drag

<GmapMarker
   :position="jdata.geo"
   :clickable="true"
   :draggable="true"
   @dragend="gMapFunc($event.latLng)"
 </GmapMarker>

////////////////////////

 methods: {
      //set after merker end drag
      gMapFunc(evnt) {
        this.jdata = {"geo": {"lat":evnt.lat(), "lng":evnt.lng()}};
      },