How to insert a map from AGM-maps into a pdf generated with jspdf in angular?

Question

I'm creating a vehicle tracking application and I'm using the data streamed onto a cloud-based database and displaying it onto a map using AGM-maps, tracing out its movement with the help of polylines.

<agm-map #map1 [zoom]="13" [latitude]="lat" [longitude]="lng" [fullscreenControl]='true' [mapTypeControl]='true' [fitBounds]="true">
     <agm-polyline [visible]="true" [strokeWeight]="3" [strokeColor]="'#07b57a'">
          <agm-polyline-point *ngFor="let coordinate of latlng; let i=index" [latitude]="coordinate[0]" [longitude]="coordinate[1]"></agm-polyline-point>
     </agm-polyline>
</agm-map>

Is there a way where I can import this map's DOM element into a pdf file singing jspdf so that I can display it alongside other data in the report?

I had previously asked a similar question regarding inserting ng2-charts in jspdf earlier, and I was recommended converting the chart canvas into a png image and inserting the image into the jspdf file. Is there a way I can do the same for AGM too? Is there a way I can convert the map into an image and insert the image into the jspdf?

I tried using the same method for ng2-charts and implemented the following code:

@ViewChild('map1', { static: true }) canvasElem!: ElementRef<HTMLCanvasElement>;

let map1 = this.canvasElem.nativeElement.toDataURL('image/png');
doc.addImage(map1, 'PNG', 175, 75, 150, 450);

But it shot me down with an error stating:

ERROR TypeError: Cannot read properties of undefined (reading 'toDataURL') at component.SavePDF