Remove google maps markers in Angular

Question

I am using the @angular/google-maps package to display a Google Map with some markers which like this:

map.html

<google-map>
    <map-marker
        *ngFor="let marker of markers"
        [position]="marker.position">
</google-map>

map.ts

@ViewChild(GoogleMap, { static: false }) map!: GoogleMap;
markers = [] as any;

replaceMarker()
{
    this.markers = [];

     this.markers.push({
         position: {
             lat: lat,
             lng: lng,
        },
        options: {
            animation: google.maps.Animation.DROP,
        },
     });
}

This is not the code but identical to the implementation. The problem I am having, is that when I try and remove all markers then add a new one, the old markers never remove from the map, they just stay there and the other markers just pile on top.

My question is: How do I remove all markers before pushing my new ones to my markers array?

Answer 1

I was getting my data from an observable so I just had to move this.markers = [] into the subscribe() function