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

user_9000486 0
Viewed 406

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? P.S: I already have a function for @drag which is to update coordinates of marker.

vue.js google-maps javascript
1 Answers

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'))
user_62771510
Related