Angular AGM draw polygon on marker click

I am using angular agm and need to draw a polygon after clicking on a marker.

<agm-map [latitude]="latitude"
         [longitude]="longitude"
         [zoom]="zoom">

  <agm-marker *ngFor="let item of items; let i = index"
              [latitude]="item.Latitud"
              [longitude]="item.Longitud"
              (markerClick)="drawPolygon($event)">

  </agm-marker>

</agm-map>

And this is the relevant part of the drawPolygon method:

event.data.add({
  geometry: new google.maps.Data.Polygon([
    zona])
})

However, I am getting the error: Cannot read property 'add' of undefined.

Any idea or workaround to draw the polygon inside that method?

Instead of using imperative commands, add a polygon the Angular/AGM way;

<agm-map [latitude]="latitude"
         [longitude]="longitude"
         [zoom]="zoom">

  <agm-marker *ngFor="let item of items; let i = index"
              [latitude]="item.Latitud"
              [longitude]="item.Longitud"
              (markerClick)="drawPolygon($event)">

  </agm-marker>

  <agm-polygon *ngFor="let polygon of polygons">
  </agm-polygon>

</agm-map>

drawPolygon() {
  this.polygons.push( newPolygonData)
}