Javascript 谷歌地图和爱奥尼亚3的空白页面

谷歌地图在浏览器和手机上以Ionic 3显示白色页面。我已经正确安装了插件并导入了所有内容。测试时，它会提示我允许定位，然后显示一个甚至没有谷歌徽标的白色页面

我已经试着重新安装所有插件并检查API密钥，所有这些似乎都是有效的

.html

.ts

从“ionic angular”导入{NavController，IonicPage，Platform}；
从'@ionic native/google maps'导入{GoogleMap，GoogleMaps}；
从'@angular/core'导入{Component，ViewChild，ElementRef}；
从'@ionic native/Geolocation'导入{Geolocation}；
声明：任何；
@IonicPage（）
@组成部分({
选择器：“页面findride”，
templateUrl:'findride.html'
})
导出类FindridePage{
@ViewChild（'map'）mapElement:ElementRef；
地图：任何；
标记=[]；
构造器（公共navCtrl:NavController，私有谷歌地图：谷歌地图，公共平台：平台，私有地理位置：地理位置）{
setTimeout（this.initMap（），10000）；
}
initMap（）{
console.log（'starting'）；
this.geolocation.getCurrentPosition（{maximumAge:3000，timeout:5000，enableHighAccurance:true}）。然后（（resp）=>{
让mylocation=new google.maps.LatLng（分别为坐标、纬度、经度）；
this.map=new google.maps.map（this.mapeElement.nativeElement{
缩放：15，
中心：mylocation
});
});
让watch=this.geolocation.watchPosition（）；
观看。订阅（（数据）=>{
这个.deleteMarkes（）；
让updatelocation=new google.maps.LatLng（data.coords.latitude，data.coords.longitude）；
let image='assets/imgs/blue bike.png'；
this.addMarker（updatelocation，image）；
this.setmaponal（this.map）；
});
}
添加标记（位置、图像）{
让marker=new google.maps.marker({
位置:位置,，
map:this.map，
图标：图像
});
这个。标记。推（标记）；
}
setMapOnAll（地图）{
对于（var i=0；i

如下所示设置地图元素的高度和宽度，您将看到地图。如果它已加载

<div #map id="map" style="height:500px; width:300px;">

控制台中是否有错误？@Olian04仅对cordova发出警告。“未检测到cordova”然后我建议您缩小规模。创建一个新的应用程序，只需使用基本要素即可使地图正常工作。如果成功了，你就知道是你自己搞砸了。如果它不起作用，那么我建议你再次阅读图书馆，或者在他们的问题跟踪器上发布一个问题。

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FindridePage } from './findride';
import { Geolocation } from '@ionic-native/geolocation';

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    FindridePage,
  ],
  imports: [
    IonicPageModule.forChild(FindridePage),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  ]  ,
  exports: [
    FindridePage
  ]
})
export class FindridePageModule {}

import { NavController,IonicPage,Platform  } from 'ionic-angular';
import { GoogleMap,GoogleMaps } from '@ionic-native/google-maps';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation';

declare var google: any;

@IonicPage()
@Component({
  selector: 'page-findride',
  templateUrl: 'findride.html'
})
export class FindridePage {
@ViewChild('map') mapElement: ElementRef;
map: any;
markers = [];

  constructor(public navCtrl: NavController, private _googleMaps: GoogleMaps,public platform: Platform,private geolocation: Geolocation) {

      setTimeout(this.initMap(), 10000);

  }



  initMap() {
    console.log('starting');
    this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((resp) => {
      let mylocation = new google.maps.LatLng(resp.coords.latitude,resp.coords.longitude);
      this.map = new google.maps.Map(this.mapElement.nativeElement, {
        zoom: 15,
        center: mylocation
      });
    });
    let watch = this.geolocation.watchPosition();
    watch.subscribe((data) => {
      this.deleteMarkers();
      let updatelocation = new google.maps.LatLng(data.coords.latitude,data.coords.longitude);
      let image = 'assets/imgs/blue-bike.png';
      this.addMarker(updatelocation,image);
      this.setMapOnAll(this.map);
    });
  }
  addMarker(location, image) {
    let marker = new google.maps.Marker({
      position: location,
      map: this.map,
      icon: image
    });
    this.markers.push(marker);
  }

  setMapOnAll(map) {
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(map);
    }
  }

  clearMarkers() {
    this.setMapOnAll(null);
  }

  deleteMarkers() {
    this.clearMarkers();
    this.markers = [];
  }
 listride(){
    this.navCtrl.push('ListridePage');
 }


}

<div #map id="map" style="height:500px; width:300px;">