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

Ionic Framework ionic-v3
1

Hi,

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';

@Component({
  selector: 'map',
  templateUrl: 'map.html'
})
export class Map {

  map: GoogleMap;

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

  loadMap() {
    let location = new LatLng(-34.9290,138.6010);

    this.map = 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
}

HTML

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

CSS

#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.

2

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

1 Like