Google Maps API показывает пустую страницу в моем ионном приложении

Question

Я пытаюсь реализовать API карт Google в своем ионном приложении. Казалось, все прошло хорошо, но странным образом я ничего не вижу на своей странице. Это процесс, которым я следовал. (Кажется простым)

добавлен скрипт в мою головку index.html <script src="https://maps.googleapis.com/maps/api/js?key=**********q3aC1a*****POEp5O**********&libraries=places"></script>

объявленная переменная Google: declare var google;

добавлен дочерний вид для элемента в моем HTML @ViewChild('map', { static: true }) mapNativeElement: ElementRef;

<ion-content> <div #map id="map"> </div> </ion-content>

затем добавил вызов afterContentInit:

ngAfterContentInit(): void {
    this.map = new google.maps.Map(
      this.mapNativeElement.nativeElement,
      {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      }
    )
  }

это мой полный файл .ts

import { Component, ElementRef, ViewChild, OnInit, AfterContentInit } from '@angular/core';
declare var google;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, AfterContentInit {
  map;
  @ViewChild('map', { static: true }) mapNativeElement: ElementRef;


  constructor() { }

  ngOnInit() {

  }

  ngAfterContentInit(): void {
    this.map = new google.maps.Map(
      this.mapNativeElement.nativeElement,
      {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      }
    )
  }

}