Ionic2 Google 地图未显示答案

【问题标题】：Ionic2 Google map not showingIonic2 Google 地图未显示
【发布时间】：2016-12-25 01:20:48
【问题描述】：

每个人我想在我的应用程序中使用谷歌地图。我已经为 Android 和 ios 安装了带有 Api 密钥的科尔多瓦插件 googlemaps。我面临的问题只是显示谷歌徽标和缩放按钮，地图的整个区域都是空白的。我正在关注本教程http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/。请指导我做错了什么。谢谢！ enter image description here

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

  }
}

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

order-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>

【问题讨论】：

代码中没有来自 Google 的 API 密钥吗？
我在安装 cordova-plugin-googlemaps 时添加了 API KEY
在插件安装comd @Sela Yair

标签： angular ionic2 cordova-plugins

【解决方案1】：

我猜这是一个典型的刷新问题。因此，在 loadMap 函数中，请尝试添加以下行：

this.map.setCenter(location);

此外，请确保您已从 Google API Console 启用必要的 Google API。我的如下：

【讨论】：

感谢您的回复，我附加了上面的行，但仍然显示空白区域。
您可以检查您的 API 配置。请查看我在上面所做的更改。
谢谢！ @Mete Cantimur 配置后就可以了！
嗨@MeteCantimur，我遵循了相同的代码，但仍然遇到类似的问题。在 iOS 模拟器上运行时，视图变得透明，没有地图。顺便说一句，我正在尝试将地图添加到离子模态。
有什么解决办法吗？