Angular 17 & @angular/[email protected] // MapClick directive not firing in map-marker

First of all i’m new to google map, it’s my first time using it, i try to get the marker’s on the map when i trigger a click on it, my goal for my app’s is to get one mark done by the client, then i give it back to his artisan to redraw the marker, then try to polygone the way back from the poisition A to B by the artisan.

First try to get the marker failed, i’m stucked here, my wish is to get the marker done, that’s will be great.

I’m having an issue with an event firing as explained in the title, map-marker is somehow not giving any response eventDOM.
here is my component.ts and html.

<google-map
  [height]="height"
  [width]="width"
  [zoom]="mapOptions.zoom!"
  [options]="mapOptions"
  [center]="mapOptions.center!"
  (mapInitialized)="handleMapInitialized($event)">

  <map-marker
    (mapClick)="openMapInfo(marker.getTitle()!, mapMarker)"
    #mapMarker="mapMarker"
    *ngFor="let marker of markers"
    [position]="marker.getPosition()!"
    [title]="marker.getTitle()!"
    />
  
  <map-info-window>{{ infoContent }}</map-info-window>

  <map-polyline [options]="polylineOptions" ></map-polyline>
</google-map>

import { Component, Input, ViewChild, type OnInit } from '@angular/core';
import { GoogleMap, MapInfoWindow, MapMarker } from '@angular/google-maps';

@Component({
  selector: 'app-api-gm',
  templateUrl: './API-GM.component.html',
  styleUrl: './API-GM.component.css',
})
export class APIGMComponent implements OnInit {
  @ViewChild(MapInfoWindow, { static: false }) infoWindow?: MapInfoWindow;

  @Input() locationFrom?: any;
  @Input() locationTo?: any;

  height: string = '600px';
  width: string = '1200px';
  mapOptions: google.maps.MapOptions = {
    center: {
      lat: 0,
      lng: 0
    },
    mapId: '9af0088ade5e5e42',
    scrollwheel: true,
    disableDoubleClickZoom: false,
    //mapTypeId: 'roadmap',
    zoom: 15,
    maxZoom: 25,
    minZoom: 1,

  };

  markers: Set<google.maps.Marker> = new Set();

  infoContent: string = '';

  polylineOptions: google.maps.PolylineOptions = {
    path: [],
    strokeColor: '#F78F08',
    strokeOpacity: 1.0,
    strokeWeight: 5,
    draggable: false
  }

  ngOnInit(): void {
    this.getCurrentPosition();
  }
  handleMapInitialized(map: google.maps.Map) {}
  getCurrentPosition(): void {
    navigator.geolocation.getCurrentPosition((position) => {
      this.mapOptions.center = {
        lat: position?.coords.latitude ?? 46.788,
        lng: position?.coords.longitude ?? -71.3893,
      }
    });
  }

  ngOnChanges(): void {
    if (this.locationFrom) {
      this.addMarker(this.locationFrom);
    }

    if (this.locationTo) {
      this.addMarker(this.locationTo);
    }

    if (this.hasLocation) {
      this.addPolyline();
    }
  }

  get hasLocation(): boolean {
    return !!this.locationFrom && !!this.locationTo;
  }

  loadMarker(location?: any): google.maps.Marker {
    return new google.maps.Marker({
      position: {
        lat: location?.latitude ?? 0,
        lng: location?.longitude ?? 0
      },
      title: location?.name ?? '',
      animation: google.maps.Animation.DROP,
      draggable: true,
    });
  }

  addMarker(location: any): void {
    const marker = this.loadMarker(location);
    this.markers.add(marker);
    this.moveMapView();
  }

  moveMap(event: any): void {
    if (event.latLng != null) {
      this.mapOptions.center = (event.latLng.toJSON());
    }
    //let loc = {lat : this.MapMarker.getPosition()?.lat, lng : this.MapMarker.getPosition()?.lng };
    //console.log(loc);
    //this.addMarker()
  }

  moveMapView(): void {
    this.mapOptions.center = {
      lat: this.locationFrom?.latitude ?? 0,
      lng: this.locationFrom?.longitude ?? 0
    }
  }

  openMapInfo(content: string, marker: MapMarker): void {
    const myLatLng = { lat: marker.getPosition()!.lat(), lng: marker.getPosition()!.lng() };
    console.log(myLatLng);
    this.infoContent = content;
    this.infoWindow?.open(marker);
    let marker0 = new google.maps.Marker ({
      position: myLatLng,
    });
    this.markers.add(marker0);

  }
  addmarker(mylatlng: any): void {   
    let marker0 = new google.maps.Marker ({
      position: mylatlng,
    });
    this.markers.add(marker0);

  }

  addPolyline(): void {
    const markers = Array.from(this.markers).slice(-2);
    const path: google.maps.LatLng[] = [];
    markers.forEach((marker, index) => {
      path.push(new google.maps.LatLng(marker.getPosition()!));
    });
    this.polylineOptions = { ...this.polylineOptions, path };
    this.markers = new Set(markers);
  }
}

i’ve try’d some tricks : put the mapClick outside the for loop and inside, different events drags/drops/dblclick etc.

I’v kept trying to call the MapMarker by a viewchild to get the positions params and got to another call outside to put the marker on the map, i didn’t succes.