Cannot click and draw/drag polygon in @angular-google-maps (not @agm/core)

I have this in my angular 18 project. I use "@angular/google-maps": "^18.2.3" for this. In this map component when I do right click I pull down a custom context menu. There I have an option called Draw polygon below is the method. The problem is I can't drag the point to draw a polygon. When I drag the point in map the entire map is dragged instead of polygon.


public drawNewPolygon(): void {
const newPolygon: MapPolygonInterface = {
points: [
this.rightClickLastPosition,
{ lat: this.rightClickLastPosition.lat + 0.001, lng: this.rightClickLastPosition.lng + 0.001 }
],
fillColor: this.mapPolygonFillColor,
strokeColor: this.mapPolygonStrokeColor,
strokeWeight: 5,
isEditable: true,
isDraggable: true
};
this.mapPolygons.push(newPolygon);
this.emitPolygons.emit(this.mapPolygons);
console.log("New polygon drawn", this.mapPolygons);
}


<google-map
height="100vh"
width="100%"

="center"
[zoom]="zoom"
[fullscreenControl]="false"
[streetViewControl]="false"
[mapTypeControl]="false"
(mapClick)="handleMapClick($event)"
(mapRightclick)="mapRightClicked($event)"
(contextmenu)="onContextMenuRightClick($event)"
>
<map-marker
*ngFor="let marker of mapMarkers"
[position]="marker"
[title]="'Marker Title'"
(markerClick)="onMarkerClick($event)"
[options]="markerOptions">
</map-marker>

<map-polygon
*ngFor="let polygon of mapPolygons; let index = index"
[paths]="polygon.points"
[polyDraggable]="true"
[editable]="true"
[draggable]="true"
(polyPathsChange)="polyPathsChange($event, index)"
(polyDblClick)="polyClickEdit($event, polygon, index)"
(polyRightClick)="polyRightClick($event, polygon, index)"
(polyMouseOver)="polyHover($event, polygon)"
(polyMouseOut)="polyMouseOut($event, polygon)"
(polyDragEnd)="polyDragEnd($event)"
[zIndex]="999999"
[options]="{
strokeColor: polygon.strokeColor,
strokeWeight: 10,
fillColor: polygon.fillColor,
fillOpacity: 0.35
}"></map-polygon>


<map-polyline
*ngFor="let polyline of mapPolylines"
[path]="polyline.points"
[options]="{
strokeColor: polyline.color,
}"
(polyPathChange)="polyPathChange($event)"
></map-polyline>
</google-map>

Continue reading...​