Ionic2 Google map not showing
<p>Everyone 
I want to use google map in my application. I have installed cordova plugin googlemaps with Api key for both Android and ios. The problem I'm facing is just showing the google logo and zooming buttons, the entire area for map is blank. I am following this tutorial <a href="http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/" rel="nofollow noreferrer">http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/</a>. please guide what I am doing wrong. Thanks!
<a href="https://i.stack.imgur.com/N99zf.jpg" rel="nofollow noreferrer">enter image description here</a></p>

<p><strong>order-tracking.ts</strong></p>

<pre><code>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(() =&gt; {
      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(() =&gt; {
      console.log('Map is ready!');
    });

  }
}
</code></pre>

<p><strong>order-tracking.scss</strong></p>

<pre><code>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;
  }
  }
}
</code></pre>

<p><strong>order-tracking.html</strong></p>

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