Search code examples
angularionic2cordova-plugins

Ionic2 Google map not showing

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 http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/. please guide what I am doing wrong. Thanks! 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>
Solution

  • I guess it is a typical refresh problem. Therefore, in loadMap function, please try appending the following line:

    this.map.setCenter(location);

    In addition, make sure that you have enabled the necessary Google APIs from Google API Console. Mine is as follows:

    enter image description here