Необработанный отказ от обещания: initMap не является функцией

Question

Я пытаюсь загрузить карту Google в свое веб-приложение, но оно создает эту ошибку:

Vc {message: "initMap is not a function", name: "InvalidValueError", stack: 
"Error↵    at new Vc (https://maps.googleapis.com/m…ueue 
(http://localhost:8100/polyfills.js:2963:35)"}

Я искал в stackoverflow аналогичные проблемы, но ни одна из них не смогла решитьошибка.

HTML:

<ion-content>
<app-map>*ngIf="(coordinates|async) as coords" [coords]="coords"</app-map>
</ion-content>

Это конкретные строки кода, которые, я подозреваю, вызывают проблемы:

export class MapComponent implements AfterViewInit {
@Input() coords: { latitude: number, longitude: number };
constructor() { }

ngAfterViewInit() {
this.initMap();

}
initMap() {
const POSITION = { lat: this.coords.latitude, lng: this.coords.longitude };
const map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: POSITION || { lat: 11, lng: 113 }
});
const marker = new google.maps.Marker({
  position: POSITION,
  map: map
});
}; 

или

  private async getCurrentPosition(): Promise<any> {
 const isAvailable: boolean = Capacitor.isPluginAvailable('Geolocation');
 if (!isAvailable) {
   console.log('Err: plugin not available');
   return of(new Error('Err: plugin not available'));
 }
 const POSITION = Plugins.Geolocation.getCurrentPosition()
 //handle capacitor Errors
 .catch(
   err => { console.log('ERR', err);
   return new Error(err.message || 'customized message' );
 });

 this.coordinates$ = fromPromise(POSITION).pipe(
   switchMap((data: any) => of(data.coords)),
   tap(data => console.log(data)) 
 );
 return POSITION

 }

Спасибо!