Googleマップ灰色のボックスのみを表示するネイティブコードバープラグイン

私は地図を表示しようとしています。私はそれの下にグーグルのロゴが入った灰色のボックスを表示しています。私はこのウェブサイト上の他の投稿を見て、それらを試してみましたが、誰もそれを修正していないようです。私はionic 3.12.0 with cordova plugin googlemaps 2.0.7を使用しています私はAPIキーが正しいことを確認し、ダッシュボードで有効にしました。Googleマップ灰色のボックスのみを表示するネイティブコードバープラグイン

私はチュートリアル以下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