谷歌地圖帶有離子3的原生cordova插件只顯示一個灰色框

我試圖獲得一個地圖顯示，我得到的所有東西都是一個灰色的框，其底部有谷歌徽標。我查看了本網站上的其他帖子，並嘗試了所有這些帖子，但他們都沒有解決這個問題。我使用離子3.12.0與科爾多瓦插件谷歌地圖2.0.7 我已經確保API密鑰是正確的，並在儀表板中啓用。谷歌地圖帶有離子3的原生cordova插件只顯示一個灰色框

我使用教程下方https://ionicframework.com/docs/native/google-maps/嘗試是代碼

import { 
GoogleMaps, 
GoogleMap, 
GoogleMapsEvent, 
GoogleMapOptions, 
CameraPosition, 
MarkerOptions, 
Marker 
} from '@ionic-native/google-maps'; 


import { Component, Input, ViewChild } from '@angular/core'; 
import { Platform } from 'ionic-angular'; 

@Component({ 
    selector: 'map', 
    template: '<div #map id="map"></div>' 
}) 
export class Map { 

    map: GoogleMap; 
    mapElement: HTMLElement; 
    constructor(private googleMaps: GoogleMaps) { } 

    setMapLocation(coords: any) { 
    this.map.setCameraTarget(coords); 
    } 

    ionViewDidLoad() { 
    this.loadMap(); 
    } 

    loadMap() { 
    this.mapElement = document.getElementById('map'); 

    let mapOptions: GoogleMapOptions = { 
    camera: { 
     target: { 
     lat: 43.0741904, 
     lng: -89.3809802 
     }, 
     zoom: 18, 
     tilt: 30 
    } 
    }; 

    this.map = this.googleMaps.create(this.mapElement, mapOptions); 

    // Wait the MAP_READY before using any methods. 
    this.map.one(GoogleMapsEvent.MAP_READY) 
    .then(() => { 
     console.log('Map is ready!'); 

     // Now you can use all methods safely. 
     this.map.addMarker({ 
      title: 'Ionic', 
      icon: 'blue', 
      animation: 'DROP', 
      position: { 
      lat: 43.0741904, 
      lng: -89.3809802 
      } 
     }) 
     .then(marker => { 
      marker.on(GoogleMapsEvent.MARKER_CLICK) 
      .subscribe(() => { 
       alert('clicked'); 
      }); 
     }); 

    }); 
}}

，我已經添加了CSS是

#map { 
    width: 100% !important; 
    height: 100% !important; 
    img{ max-width: none !important; } 
    overflow:visible !important; 
    z-index: 1; 
} 

ion-app._gmaps_cdv_ .nav-decor{ 
    background-color: transparent !important; 
}

來源

2017-09-25 NoobProGmer

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md – wf9a5m75