Filter Google Maps Marker in Angular 13

Question

I have an Angular app with a bunch of Google Map Markers. I used @types/googolmaps library to create a map and marker. I have done filtering using category with setVisible(false) based on select element value on the app.component.html, but now I'm stuck on filtering using search input and two-way data binding. I can filter title or other properties but the only text is filtering in div or li or other elements with *ngFor and | filter pipe not a marker in app.component.html, When I'm typing in the search bar, the marker doesn't filter on the map...

Here is my array of marker (only few of them for example):

export const MarkerDataSeed = [
{
  placeName: 'Hajrudin (Parička)',
  placeFilter: 'NoviPazarDataFilter',
  cadastarMunicipality: 'Novi Pazar',
  cadastralParcelNumber: '3267',
  realEstateNumber: '17270',
  areaSize: '1.266',
  yearFounded: '1528',
  streetName: 'Sjenička',
  image: "https://lh5.googleusercontent.com/p/AF1QipOEZIRAsXGrQL8k_Slgb4mD-1Z-UoP9PhNMHAA=s812-k-no",
  position: new google.maps.LatLng(43.14156502690787, 20.511062743761784)
},

{
  placeName: 'Dibak-Ishak (Lug)',
  placeFilter: 'NoviPazarDataFilter',
  cadastarMunicipality: 'Novi Pazar',
  cadastralParcelNumber: '3870',
  realEstateNumber: '15487',
  areaSize: '836',
  yearFounded: '1468',
  streetName: 'Cetinjska, 1',
  image: "http://www.medzlisnp.org/wp-content/uploads/2017/12/Dibak-Ishak-2.jpg",
  position: new google.maps.LatLng(43.136909849431504, 20.5092872247275)
},

{
  placeName: 'Ahmed-Vojvode',
  placeFilter: 'NoviPazarDataFilter',
  cadastarMunicipality: 'Novi Pazar',
  cadastralParcelNumber: '9793',
  realEstateNumber: '12129',
  areaSize: '777',
  yearFounded: '1516',
  streetName: '1. maja, 79',
  image: "https://lh5.googleusercontent.com/p/AF1QipPRhvROyvaZkjOF5vcGktMB9URQ0LsQNAWmysB6=w203-h152-k-no",
  position: new google.maps.LatLng(43.13544587121433, 20.5186265251259)
},

];

app.component.ts

export class AppComponent {
@ViewChild('mapContainer', { static: false }) gmap: ElementRef;
searchValue?: string;
title = 'Muftijstvo Sandzacko Mape Vakufa';
map?: google.maps.Map;
mapStyle = mapStyling;

markerData = MarkerDataSeed;
gmarkers: Array<any> = [];
filterPipe = new FilterPipe();
markerEvents = new MarkerEvents();
markerStyling = new StylingMarkers();
polygons = new PolygonsBoundaries();

mapInitializer(): void {
    this.map = new google.maps.Map(this.gmap.nativeElement, {
        center: new google.maps.LatLng(42.99603931107363, 19.863259815559704),
        zoom: 8.5,
        styles: this.mapStyle,
    });
    this.addMarkerToMap();
    this.polygons.drawPolgygons(this.map);
}

ngAfterViewInit(): void {
    this.mapInitializer();
}

addMarkerToMap() {
    return this.markerData.map(extractedMarkerData => {
        const marker = new google.maps.Marker({
            ...extractedMarkerData,
            position: new google.maps.LatLng(extractedMarkerData.position),
            icon: this.markerStyling.markerIconDefaultCreate(),
            // label: this.markerStyling.markerLabelDefault(extractedMarkerData),
            draggable: false,
            optimized: false,
            animation: google.maps.Animation.DROP,
        });
        this.markerEvents.markerMouseOver(marker);
        this.markerEvents.markerInfoWindow(marker, extractedMarkerData, this.map);
        this.markerEvents.markerMouseOut(marker);
        marker.setMap(this.map);
        this.gmarkers.push(marker);

    });
    // new MarkerClusterer({ this.map, markers });

}

filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(markersList: Array<any>, searchTitle: string): any {
    if (markersList && searchTitle)
      return markersList.filter(
        (markerData) =>
          markerData.placeName.indexOf(searchTitle) > -1
      );
    return markersList;
  }

}

and app.component.html

<input type="text" name="search" [(ngModel)]="searchValue" />
  {{searchValue}}
<div class="container">
    <h3 class="text-center mb-5 mt-5">Muftijstvo sandžačko | mape vakufa</h3>
    <div class="row">
      <div #mapContainer id="map-canvas"></div>
    </div>
</div>

What I need to do to filter marker when typing in search bar, and marker start to paper or disappear on the map?