I am currently encountering some difficulties when attempting to open a map-info-window within the Google Map component in an Angular 14 project using the guidelines provided here. For this task, I am utilizing the Google Maps package for Angular available at this link.
Here is a snippet of my HTML code:
<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 here is a glimpse of my TypeScript file where I retrieve data and define 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 issue I am facing is related to a compiling error that states: "error TS2345: Argument of type 'HTMLElement' is not assignable to parameter of type 'MapMarker'." from (mapClick)="openInfo(markerElem, s.Nome)"
I am currently working on resolving this issue. It seems like the function is receiving an HTML component instead of a marker, but I am unsure of how to address it. I have only been using Angular for a week, so I hope this is just a beginner mistake.
As a reference, here is a link to my package file: