Drawing google maps polylines by clicking

Ionic Framework
1

Hello. I’m working on aproject where in Ionic where I am using google maps jS API to draw polylines when the user clicks. I followed the example given _Complex Polylines  |  Maps JavaScript API  |  Google for Developers . The map loads well but the problem is that every time I click on it to draw the map I receive the following error:

core.js:6228 ERROR TypeError: Cannot read property ‘getPath’ of undefined
at Si.addLatLng (remote.page.ts:42)
at pf.H (js?key=AIzaSyA0BLaBwEpx1lx_dT3JAG3mz1e_tLBHq1s&libraries=geometry:220)
at Object..L.trigger (js?key=(my_key)&libraries=geometry:217)
at uw (map.js:24)
at rw (map.js:22)
at Object.onClick (map.js:21)
at Gp..r.Nb (common.js:148)
at Bp..r.Nb (common.js:147)
at cq (common.js:61)
at HTMLDocument.Ga..Np.Tb (common.js:61)
defaultErrorLogger @ core.js:6228
handleError @ core.js:6281
next @ core.js:42614
schedulerFn @ core.js:37119
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:37079
(anonymous) @ core.js:41694
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:41488
onHandleError @ core.js:41691
handleError @ zone-evergreen.js:363
runTask @ zone-evergreen.js:171
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCaptureCallback @ zone-evergreen.js:1672

I have searched for the reason behind it but I’m unable to find the correct answer.What could be the cause of this.
I installed type google maps using the command:
npm install --save-dev @types/googlemaps

Here is the typescript code:

/// <reference types="@types/googlemaps" />
import { Component, OnInit } from '@angular/core';
// import { } from 'googlemaps';
// import {googlemaps} from '@types/googlemaps'

  declare var google;

@Component({
  selector: 'app-remote',
  templateUrl: './remote.page.html',
  styleUrls: ['./remote.page.scss'],
})
export class RemotePage implements OnInit {
 poly: google.maps.Polyline;
 map: google.maps.Map;

  constructor() { }

  ngOnInit() {
    this.map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      zoom: 7,
      center: { lat: 37.386052, lng: -122.083851 } // Center the map on Chicago, USA.
    });

    this.poly = new google.maps.Polyline({
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    this.poly.setMap(this.map);

    // Add a listener for the click event
    this.map.addListener('click', this.addLatLng);
  }

 initMap(): void {

}

// Handles click events on a map, and adds a new point to the Polyline.
addLatLng(event: google.maps.MouseEvent) {
  const path = this.poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  // tslint:disable-next-line: no-unused-expression
  new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: this.map
  });
}

}

I would appreciate your help. Thanks