ionic 2 blank google map

私はイオン2を使い慣れています。私はIntegrating Native Google Maps into an Ionic 2 Applicationを練習しようとしていますが、アンドロイドデバイスでアプリを実行すると、次のような空のGoogleマップが表示されます。ionic 2 blank google map

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!'); 
    }); 
    } 
}

他のページ。

私のGoogleデベロッパーコンソールのAPIマネージャがある：私は欠場かわからない