how to pass map-marker from mapclick event to function from google-map component

Question

i'm facing some issues while trying to open a map-info-window within the google-map (https://www.npmjs.com/package/@angular/google-maps) component inside an Angular 14 project by following this guidelines (https://timdeschryver.dev/blog/google-maps-as-an-angular-component#setup).

this is my html:

<google-map #GoogleMap height="500px" width="100%" [zoom]="zoom" [center]="center" [options]="options">
<map-marker-clusterer [imagePath]="'./assets/images/mappa/m'">
    <map-marker #markerElem *ngFor="let s of strutture; let i = index;" 
        (mapClick)="openInfo(markerElem, s.Nome)"
        [position]="{lat: toNumber(s.Latitudine), lng: toNumber(s.Longitudine)}"
        [label]="getLabel(s.Prezzo.toString())" [icon]="getIcon()">
    </map-marker>
    <map-info-window>{{ infoContent }}</map-info-window>
</map-marker-clusterer>

and this is my ts from where i get my data and functions:

export class MappaRisultatiComponent implements OnInit {
@Input() strutture: Struttura[];
toNumber = toNumber;
center!: google.maps.LatLngLiteral;
icon: google.maps.Icon;
zoom: 8;
options: google.maps.MapOptions = {
    ...
}
@ViewChild(GoogleMap, { static: false }) map: GoogleMap
@ViewChild(MapInfoWindow, { static: false }) info: MapInfoWindow
infoContent = ''
openInfo(marker: MapMarker, content) {
    this.infoContent = content
    this.info.open(marker)
}

ngOnInit() {
    this.center = {
        lat: toNumber(this.strutture[0].Latitudine),
        lng: toNumber(this.strutture[0].Longitudine),
    }

    this.icon = {
        url: './assets/images/mappa/priceLabel.png'
    }
}

public getLabel(prezzo: string): google.maps.MarkerLabel {
    let ret: google.maps.MarkerLabel = {
        fontWeight: 'bold',
        text: prezzo + '€'
    }
    return ret;
}

public getIcon(): google.maps.Icon {
    let ret: google.maps.Icon = {
        url: './assets/images/mappa/priceLabel.png'
    }
    return ret;
}

the point is i can't compile because it gives me this error: "error TS2345: Argument of type 'HTMLElement' is not assignable to parameter of type 'MapMarker'." from (mapClick)="openInfo(markerElem, s.Nome)"

i'm trying to figure it out, i do understand that the function is getting the html component instead of the marker but i don't know what else should i do... i'm using Angular from just a week I hope it's just a newbie error.

just to help this is my package file:

package.json

Answer 1

it seems like that to change the type i can just use

from the .ts

import { GoogleMap, MapInfoWindow, MapMarker } from '@angular/google-maps';

in the html

<map-marker #markerElem="mapMarker" *ngF...

now it works