Ionic2 Google Karte zeigt nicht

Question

Jeder Ich möchte Google Map in meiner Anwendung verwenden. Ich habe cordova Plugin googlemaps mit Api-Schlüssel für Android und iOS installiert. Das Problem, mit dem ich konfrontiert bin, zeigt nur das Google-Logo und Zoom-Tasten, der gesamte Bereich für die Karte ist leer. Ich folge diesem Tutorial http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/. Bitte führe, was ich falsch mache. Vielen Dank! enter image description here

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

    } 
} 

auftrag 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; 
    } 
    } 
} 

auftrag 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

Ich denke, es ist ein typisches Refresh-Problem. Daher in loadMap Funktion, versuchen Sie bitte die folgende Zeile anhängt:

this.map.setCenter(location); 

Darüber hinaus stellen Sie sicher, dass Sie die erforderlichen Google APIs von Google API Console aktiviert haben. Mine ist wie folgt: