I’m rendering around 400 map advanced markers, however, these makes my app extremely slow and i can’t see anything that could cause this problem.

This is the code i have:

<div class="map-container" style="height: 100%;">
  <google-map #map height="100%" width="100%" [options]="mapOptions" mapId="myMapID">
      @for (marker of markers; track marker) {
        <map-advanced-marker #markerElem="mapAdvancedMarker" [position]="marker ?? {lat: 0, lng: 0}"  [title]="marker.title"
        (mapClick)="onMarkerClick(markerElem)"></map-advanced-marker>
      }
      <map-info-window #infoWindow>info window</map-info-window>
  </google-map>
</div>

onMarkerClick opens a new infowindow to show related info about the marker:

  onMarkerClick(marker: MapAdvancedMarker) {
    const contentString = 'some html here' 
    this.infoWindow.openAdvancedMarkerElement(marker.advancedMarker, contentString);
  }

I tried using clustering but i think that’s not a solution, the performance is still slow and i saw other apps running hundreds of markers without grouping them, and the app was having a good performance.
Sadly the angular google maps documentation is not that good and i don’t find anything that could cause this lag.
Also, i tried to run this in a blank project and i got the same result.