離子2空白谷歌地圖

我是新來的離子2.我嘗試練習Integrating Native Google Maps into an Ionic 2 Application，但是當我在Android設備上運行應用程序時，它會給出一個空白的谷歌地圖，如下圖所示。離子2空白谷歌地圖

home.ts頁：

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     Ionic Blank 
    </ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content> 
    <div id="map"></div> 
</ion-content>

home.scss是：

.scroll { 
height: 100%; 
} 
#map { 
width: 100%; 
height: 100%; 
} 
scroll-content._gmaps_cdv_{ 
background-color: transparent !important; 
padding: 0px !important; 
} 
ion-app._gmaps_cdv_ .nav-decor{ 
    background-color: transparent !important; 
} 
home-page { 
}

home.ts是：

import { Component } from '@angular/core'; 
import { NavController, Platform } from 'ionic-angular'; 
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native'; 
@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
    map: GoogleMap; 
    constructor(public navCtrl: NavController, public platform: Platform) { 
    platform.ready().then(() => { 
     this.loadMap(); 
    }); 
    } 
    loadMap(){ 
    let location = new GoogleMapsLatLng(-34.9290,138.6010); 
    this.map = new GoogleMap('map', { 
     'backgroundColor': 'white', 
     'controls': { 
     'compass': true, 
     'myLocationButton': true, 
     'indoorPicker': true, 
     'zoom': true 
     }, 
     'gestures': { 
     'scroll': true, 
     'tilt': true, 
     'rotate': true, 
     'zoom': true 
     }, 
     'camera': { 
     'latLng': location, 
     'tilt': 30, 
     'zoom': 15, 
     'bearing': 50 
     } 
    }); 
    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => { 
     console.log('Map is ready!'); 
    }); 
    } 
}

我沒有改變任何其他頁面。

我的谷歌開發者控制檯API經理：