Specific to angular Google Maps: clearing out markers from map

Question

This is an Angular specific / Google Maps problem. I am using the Angular Google Maps library. I am struggling to reference Google's Marker object because they are generated in the HTML file.

HTML

<map-marker
  #markerElem
  *ngFor="let marker of markers"
  [position]="marker.position"
  [title]="marker.title"
  [options]="marker.options"
  (mapClick)="openInfo(markerElem, marker.info)"
>
</map-marker>

I need to clear these markers out that are generated in this HTML file. It seems that google maps does not have a clearMap() functionality, and most forums agree it is best to keep track of markers by having a list of them in the code.

The "markers" variable seen in the HTML is just a custom object I made to fill in the fields of the actual Google Marker object.

There are two solutions I can think of but I don't know how to go about doing it.

1.) generate the Marker objects in my TS file. (Note: I would like to keep as much as possible the structure of the HTML. One thing I did worry is that the tag would automatically create a map marker and thus my list of Marker objects wouldn't actually be the ones on the map). 2.) somehow reference the (I think these tags actually generate markers in the background) as a list of Markers.

If anyone has examples of clearing markers off the map in Angular please share. Any help / suggestions are appreciated.

Answer 1

When you need to clear the markers,

In your ts file, just do

markers = [];