Getting Position of Marker After Dragging Laravel-VUE based component - laravel

Question

I am using
vue-google-maps
They working good so far, I want to achieve that when someone search and select their area a marker appears and then they can drag it to their required position.
I have so far managed to make the marker draggable by editing GoogleMap.vue file
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:draggable="true"
#click="center=m.position"
#drag="setCurrent(this)"
></gmap-marker>
Now I am able to drag the marker however the coordinates (lat:long) doesn't change.
I am using Laravel 1.4.1
Vue 3.0.0-beta.6
Please help
rest of the GoogleMap.vue look like this
<script>
export default {
name: "GoogleMap",
data() {
return {
center: { lat: 24.9004057, lng: 67.1926178 },
markers: [],
places: [],
currentPlace: null,
};
},
mounted() {
this.geolocate();
},
methods: {
// receives a place object via the autocomplete component
setPlace(place) {
this.currentPlace = place;
this.addMarker();
},
addMarker() {
if (this.currentPlace) {
const marker = {
lat: this.currentPlace.geometry.location.lat(),
lng: this.currentPlace.geometry.location.lng()
};
this.markers.push({ position: marker, draggable: true });
this.places.push(this.currentPlace);
this.center = marker;
this.currentPlace = null;
}
},
geolocate: function() {
navigator.geolocation.getCurrentPosition(position => {
this.center = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
});
},
checkthis(position){
console.log(navigator.position.getCurrentPosition());
}
}
};
</script>

Answer 1

To get marker position once it is dragged Marker.dragend is better suited then Marker.drag:
This event is fired when the user stops dragging the marker.
In case of vue-google-maps library marker position could be determined like this:
<gmap-marker
:draggable="true"
:key="index"
v-for="(m, index) in markers"
:position="m.position"
#click="center=m.position"
#dragend="showLocation"
></gmap-marker>
showLocation: function(evt){
console.log( evt.latLng.toString());
}
where evt is a MouseEvent object and MouseEvent.latLng property contains the position of dragged marker
The same applies to #drag event.