Ionic2 Google map не отображается

Question

Все Я хочу использовать карту google в своем приложении. Я установил googlemaps плагины corova с ключом Api для Android и ios. Проблема, с которой я столкнулся, - это просто показывать логотип 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

Я предполагаю, что это типичная проблема обновления. Поэтому в loadMap функции, пожалуйста, попробуйте добавить следующую строку:

this.map.setCenter(location); 

Кроме того, убедитесь, что вы включили необходимый API Google, из Google API Console. Шахта выглядит следующим образом: