Ionic2 Google mapが表示されない

Question

誰もが 自分のアプリケーションでGoogleマップを使いたいです。 AndroidとiOSの両方にApiキーを使用してコードブラウザのプラグインgooglemapsをインストールしました。私が直面している問題は、ちょうどGoogleロゴとズームボタンを表示している、地図のための領域全体が空白です。私はこのチュートリアルhttp://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/に従っています。私が間違っていることを指導してください。ありがとう！ enter image description here

順序tracking.ts

import { Component } from '@angular/core'; 
import {NavController, Platform} from 'ionic-angular'; 
import { 
    GoogleMap, 
    GoogleMapsEvent, 
    GoogleMapsLatLng, 
    CameraPosition, 
    GoogleMapsMarkerOptions, 
    GoogleMapsMarker 
} from 'ionic-native'; 
/* 
Generated class for the OrderTracking page. 

See http://ionicframework.com/docs/v2/components/#navigation for more info on 
Ionic pages and navigation. 
*/ 
@Component({ 
    selector: 'page-order-tracking', 
    templateUrl: 'order-tracking.html' 
}) 
export class OrderTracking { 

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

    } 
} 

順序tracking.scss

page-order-tracking { 
    .scroll { 
    height: 100%; 
    } 

    #map { 
    width: 100%; 
    height: 60%; 
    } 


    ion-app._gmaps_cdv_ .nav-decor{ 
background-color: transparent !important; 
.tackdiv{ 
color:darkorange; 
text-align: center; 

    } 
    .mytext{ 
margin-top: 10px; 
color: lightgrey; 
    } 
    } 
} 

順序tracking.html

<ion-content> 
     <div id="map"></div> 
<h1 class="tackdiv">Your order is dispatched </h1> 
    <h4 class="mytext">Your order will be delivered in 32 mins</h4> 
    <ion-item> 
    <ion-avatar item-left> 
     <img src="assets/img/Umar.png"> 
    </ion-avatar> 
    <h4>Umar </h4> 
    <ion-icon name='call' item-right></ion-icon> 
    <ion-icon name='mail' item-right></ion-icon> 
    </ion-item> 
    </ion-content> 

Answer 1

これは一般的なリフレッシュの問題だと思います。あなたはGoogle API Consoleから必要なGoogleのAPIを有効にしていることを確認して、さらに

this.map.setCenter(location); 

： したがって、loadMap機能では、次の行を追加してみてください。次のように鉱山は、次のとおりです。