How can I use @drag function of marker on vue2-google-map using new google.maps?

Question

This is my code:

<template>
   <div>
      <GmapMap id="map"/>
   </div>
</template>
<script>
mounted(){
   let map_div = document.getElementById("map");
   let map = new google.maps.Map(map_div, { zoom: 15, center: { lat: 14.358723, lng: 120.788403 } })

   **// THIS IS HOW I CREATE MARKER**
   let marker = new google.maps.Marker({
      position: { lat: 14.358723, lng: 120.788403 },
      map: map,
      icon: {
         path: "<insert svg path>",
         fillColor: "#43A047",
         fillOpacity: 1,
         strokeWeight: 2,
         strokeOpacity: 0.6,
         rotation: 0,
         scale: .08,
         anchor: new google.maps.Point(250, 250),
      }
   });

   **// THIS IS HOW I SET MARKER DRAGGABLE**
   marker.setDraggable(true)
}
</script>

Question: How can I use @drag function using mounted? PS: I already have a function for @drag which is to update coordinates of marker.

Answer 1

The Marker class emits a drag event . Instead of using Vue's @drag (used in templates), you could add a listener to the Marker 's event programatically with the inherited addListener() method :

let marker = new google.maps.Marker(...)
marker.addListener('drag', (e) => console.log('dragging'))