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

내가 변화하지 않았다 다른 페이지.

내 구글 개발자 콘솔 API 관리자입니다 : 내가 그리워 모르는