I am unable to implement autocomplete search address functionality in my project.

I followed this link and added a searchbox, but it is not showing the address list.

Here’s my code:

index.html:

  ...
    <script src="https://maps.googleapis.com/maps/api/js?key={KEY}"></script>
  ...

app.html:

    // This is the input field for search
    <input
      #mapSearchField
      class="searchInput"
      type="text" 
      placeholder="Search"
    >
    <google-map
      [options]="mapOptions"
    >
     ...
    </google-map>

app.ts:

  import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
  import { GoogleMap, MapInfoWindow, MapMarker, MapCircle } from '@angular/google-maps';

  @ViewChild('mapSearchField') searchField: ElementRef;
  @ViewChild(GoogleMap) map: GoogleMap;
  @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;

  mapOptions: google.maps.MapOptions = {
    center: {lat: 35.572449, lng: -101.782186},
    zoom: 4
  }; 

  // This is where searchbox instance is passed
  ngAfterViewInit() {
    const searchBox = new google.maps.places.SearchBox(this.searchField.nativeElement);
    console.log(searchBox);
    this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(this.searchField.nativeElement);
  }

Map: