@angular/google-maps (mapDrag) doesn't work

Question

could you please help me with this, when using the @angular/google-maps library, I tried to use (mapDrag) to call a function when dragging a marker, I used [draggable = true] to be able to drag it but when I try to drag my marker, in instead the map is dragged as if it did not exist, and the event (mapDrag) is never fired, I had previously tried to stop the map from being pulled but it still didn't work, below is the code

<google-map [options]="options">

    <map-marker #myMarker
    [position]="prueba"
    [draggable]="true"
    (mapDrag)="hello()"

     ></map-marker>
     </google-map>


   //component


  options: google.maps.MapOptions = {
    center: {lat: 10, lng: -70},
  };
  hello(){
      console.log("Hello, you are dragging the marker")
    }

Answer 1

When you set the marker as draggable, it captures the drag events, preventing the map from receiving them and causing the map to be dragged instead of the marker.

You can stop the propagation of the marker's drag events to the map by adding the clickable property to the map-marker element and setting it to false.

.html

<google-map [options]="options">
  <map-marker #myMarker
    [position]="prueba"
    [draggable]="true"
    (mapDrag)="hello()"
    [clickable]="false"
  ></map-marker>
</google-map>

.ts

options: google.maps.MapOptions = {
    center: {lat: 10, lng: -70},
  };

hello() {
  console.log("Hello, you are dragging the marker");
}