Ionic2 Google map not showing

Ionic Framework ionic-v3
1

Hi, 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 am facing is just showing the google logo and zooming buttons, the entire area for map is blank. i am following this tutorial http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/. please guide what i am doing wrong. Thanks!

image
googlemap.jpg540×960 36.8 KB

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>