Ionic 3 Google maps - map doesn't show on android

Question

i'm trying to use geolocation and google maps with ionic 3, the app is working fine in the browser:

but for some reason, when i build the apk is not showing the map on my phone

this the geolocation .ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation, Geoposition } from '@ionic-native/geolocation';

declare var google;

@IonicPage()
@Component({
  selector: 'page-geo',
  templateUrl: 'geo.html',
})
export class GeoPage {
  map: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public geo: Geolocation) { }

  ionViewDidLoad() {
    this.getPosition();
  }

  getPosition():any{
    this.geo.getCurrentPosition().then(resp => {

      this.loadMap(resp);

    }).catch((error) =>{
      console.log(error);
    })
  }
  loadMap(position: Geoposition){

let latitud = position.coords.latitude;
let longitud = position.coords.longitude;
console.log(latitud, longitud);

let mapEle: HTMLElement = document.getElementById('map');

let myLatLng = {lat: latitud, lng: longitud};

this.map = new google.maps.Map(mapEle, {
  center: myLatLng,
  zoom: 12
});



google.maps.event.addListenerOnce(this.map, 'idle', () => {
  let marker = new google.maps.Marker({
    position: myLatLng,
    map: this.map,
    title: 'Hello World!'
  });
  mapEle.classList.add('show-map');
    });

  }



}

i don't know what's wrong, thanks in advice

Answer 1

Your problem is that you call loadMap(resp) only after successfully getting geolocation.

If the geolocation request fails (due to permissions) then the app will not load.

You need to load the map then set the center:

ionViewDidLoad() {
    this.loadmap()
    this.getPosition();
}

getPosition(): any {
    this.geo.getCurrentPosition().then(resp => {
        this.setCenter(resp);
    }).catch((error) => {
        console.log(error);
    })
}

loadMap() {
    let mapEle: HTMLElement = document.getElementById('map');
    this.map = new google.maps.Map(mapEle, {
        center: myLatLng,
        zoom: 12
    });
}

setCenter(position: Geoposition) {
    let myLatLng = { lat: position.coords.latitude, lng: position.coords.longitude };
    this.map.setCenter(myLatLng);

    google.maps.event.addListenerOnce(this.map, 'idle', () => {
        let marker = new google.maps.Marker({
            position: myLatLng,
            map: this.map,
            title: 'Hello World!'
        });
        mapEle.classList.add('show-map');
    });
}

---

Alternatively, you can call loadMap() in the .catch() of the geolocation promise, and the load the map there without coords.

getPosition(): any {
    this.geo.getCurrentPosition().then(resp => {
        this.loadMap(resp);
    }).catch((error) => {
        // Load the map even if we fail
        this.loadMapFallback();
        console.log(error);
    });
}

/*
 ... old load map function
 */

loadMapFallback() {
    let mapEle: HTMLElement = document.getElementById('map');

    this.map = new google.maps.Map(mapEle, {
        zoom: 12
    });
}