Can't get map component to load using platform.ready


I can’t get my map component to display the cordova google map.

And in the console I get

deviceready has not fired after 5 seconds.           cordova.js:1223

I have the following in my map.ts

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { GoogleMap, LatLng } from '@ionic-native/google-maps';

  selector: 'map',
  templateUrl: 'map.html'
export class Map {

  map: GoogleMap;

  constructor(public navCtrl: NavController, public platform: Platform)  {
    platform.ready().then(() => {
      console.log("platform ready");

  loadMap() {
    let location = new LatLng(-34.9290,138.6010); = new GoogleMap('map', {
        'backgroundColor': 'white',
        'controls': {
          'compass': false,
          'myLocationButton': false,
          'indoorPicker': false,
          'zoom': false
        'gestures': {
          'scroll': true,
          'tilt': false,
          'rotate': false,
          'zoom': true
        'camera': {
          'latLng': location,
          'tilt': 20,
          'zoom': 16,
          'bearing': 0
    console.log("mapload finished");

  } // End of load map


<div id="map"></div>


#map {
  height: 100%;
  width: 100%;

And finally <map></map> in my home.html

I put a console.log inside the platform.ready as you can see but it doesn’t run.

Am I missing something obvious - the app show up a blank screen.

The way you are giving birth to the GoogleMaps object does not match the documentation.

1 Like