Google api places-searchbox angular 8

I have found a link to run the places to search on JsFiddle but i don't know how to work it in my code. Here is my link which i'm following below.
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox#maps_places_searchbox-typescript

As i see the code in JsFiddle it works as expected but as i transfer my code in Angular 8 which is below.

Here is my TestPage4.ts

import { Component, OnInit } from '@angular/core';
import { google } from '@agm/core/services/google-maps-types';

@Component({
  selector: 'TestPage4',
  templateUrl: './TestPage4.html',
  styleUrls: ['./TestPage4.css']
})

export class TestPage4 implements OnInit {
  constructor() {
  }
  ngOnInit() {
    //this.initAutocomplete();
    //throw new Error("Method not implemented.");
  }initAutocomplete() {
    const map = new google.maps.Map(document.getElementById("map"), {
      center: {
        lat: -33.8688,
        lng: 151.2195
      },
      zoom: 13,
      mapTypeId: "roadmap"
    }); // Create the search box and link it to the UI element.
  
    const input = document.getElementById("pac-input");
    const searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); // Bias the SearchBox results towards current map's viewport.
  
    map.addListener("bounds_changed", () => {
      searchBox.setBounds(map.getBounds());
    });
    let markers = []; // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
  
    searchBox.addListener("places_changed", () => {
      const places = searchBox.getPlaces();
  
      if (places.length == 0) {
        return;
      } // Clear out the old markers.
  
      markers.forEach(marker => {
        marker.setMap(null);
      });
      markers = []; // For each place, get the icon, name and location.
  
      const bounds = new google.maps.LatLngBounds();
      places.forEach(place => {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
  
        const icon = {
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
        }; // Create a marker for each place.
  
        markers.push(
          new google.maps.Marker({
            map,
            icon,
            title: place.name,
            position: place.geometry.location
          })
        );
  
        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });
  }
}

Here is my TestPage4.html

<div class="row m-t-15" style="background:#FFF;"> 
  <div class="col-12 n_m_p panel panel-inverse" data-sortable-id="table-basic-7" style="margin:0; padding:0;">
    <!DOCTYPE html>
    <html>
      <head>
        <title>Places Search Box</title>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
        <script
          src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initAutocomplete&libraries=places&v=weekly"
          defer
        ></script>
        <!-- jsFiddle will insert css and js -->
      </head>
      <body>
        <input id="pac-input" class="controls" type="text" placeholder="Search Box" />
        <div id="map"></div>
      </body>
    </html>
</div>
</div>

Now if i try to add the

ngOnInit() {
    this.initAutocomplete();
  }

It gives me error like this ERROR TypeError: Cannot read property 'maps' of undefined. Here is a screenshot below.

I can't understand how to make this code work to search location on the map ..?