Google地图不会显示在Modal Ionic中

npm install @ionic-native/google-maps
ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY"

import { Component } from '@angular/core';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng } from '@ionic-native/google-maps';

@Component({
  selector: 'page-map',
  templateUrl: 'map.html'
})
export class MapPage {
  map: GoogleMap;

  constructor(private googleMaps: GoogleMaps) {}

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {
    const element = document.getElementById('map');

    this.map = this.googleMaps.create(element);

    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      console.log('Map is ready!');
      // 在这里可以添加地图标记、绘制路径等操作
    });
  }
}

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

import { NavController } from 'ionic-angular';
import { MapPage } from '../map/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(private navCtrl: NavController) {}

  openMap() {
    this.navCtrl.push(MapPage);
  }
}