Ionic-native-google-maps: Ionic 4 - IOS - Google map native - "Crash"

Created on 23 Mar 2019 · 16Comments · Source: ionic-team/ionic-native-google-maps

Hi everyone,

I'm looking to someone having trouble when using Google Map Native plugin with IOS.
Everything works fine with the browser and Android.
The crash on IOS appears when performing:

this.map = GoogleMaps.create("map_canvas");

This is not really a crash. The app quit, go to the home screen of my iPhone and the app still in background. I can rerun it but "crash" again.
There is no error messages, and a simple Try Catch doesn't catch the problem (and the crash always).
Any solution about that ?

{
  "name": "spoter",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/call-number": "^5.0.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/geolocation": "^5.0.0",
    "@ionic-native/google-maps": "^5.0.0-beta.27",
    "@ionic-native/google-nearby": "^5.2.0",
    "@ionic-native/splash-screen": "5.0.0",
    "@ionic-native/status-bar": "5.0.0",
    "@ionic/angular": "4.0.0-rc.0",
    "@ionic/pro": "2.0.4",
    "@ionic/storage": "^2.2.0",
    "call-number": "1.0.1",
    "cordova-android": "7.1.4",
    "cordova-browser": "5.0.4",
    "cordova-ios": "4.5.5",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "6.0.1",
    "cordova-plugin-file-transfer": "1.7.1",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googlemaps": "^2.5.2",
    "cordova-plugin-ionic": "^5.2.9",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^3.1.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.6.0",
    "core-js": "^2.6.5",
    "mx.ferreyra.callnumber": "0.0.2",
    "rxjs": "~6.3.3",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.11.4",
    "@angular-devkit/build-angular": "^0.13.6",
    "@angular-devkit/core": "~7.1.4",
    "@angular-devkit/schematics": "~7.1.4",
    "@angular/cli": "~7.1.4",
    "@angular/compiler": "~7.1.4",
    "@angular/compiler-cli": "^7.2.9",
    "@angular/language-service": "~7.1.4",
    "@ionic/angular-toolkit": "^1.2.3",
    "@types/jasmine": "^2.8.16",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.12.29",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "^5.12.1",
    "typescript": "~3.1.6"
  },
  "description": "Spoter",
  "cordova": {
    "plugins": {
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "hiden",
        "API_KEY_FOR_IOS": "hiden",
        "PLAY_SERVICES_VERSION": "15.0.1",
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
      },
      "cordova-plugin-ionic": {
        "APP_ID": "hiden",
        "CHANNEL_NAME": "Master",
        "UPDATE_METHOD": "auto",
        "UPDATE_API": "https://api.ionicjs.com",
        "MAX_STORE": "2",
        "MIN_BACKGROUND_DURATION": "30"
      },
      "mx.ferreyra.callnumber": {},
      "cordova-sqlite-storage": {},
      "call-number": {}
    },
    "platforms": [
      "browser",
      "ios"
    ]
  }
}

Source

Gonath

Most helpful comment

Hello which Cordova IOS version are you using? I got very similar issues
with 4.5.5 but they went away after upgrading to 5.0.0. can you please show
us the output of the ionic info command?

On Sun, Mar 31, 2019, 19:01 Jonathan Denies notifications@github.com
wrote:

I tested the multibranch version and the stable version.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-native-google-maps/issues/189#issuecomment-478359071,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABJzAADA3o0pWAzw1uqIAu_6MB72569gks5vcOnjgaJpZM4cFCg_
.

battika on 1 Apr 2019

❤4

All 16 comments

The execution is done with ngAfterViewInit and platform.ready()

async ngAfterViewInit() {
    this.platform.ready().then(() => {
      this.loadMap();
    });
  }

Gonath on 23 Mar 2019

👎1

Yes, you have to wait this.platform.ready()

wf9a5m75 on 23 Mar 2019

Euh… no, this is what I did but that crash.

Gonath on 23 Mar 2019

👍1

Can you un-closed this topic ?

Gonath on 23 Mar 2019

Please read this slides before using this plug-in.
Everything are described.

https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000

wf9a5m75 on 23 Mar 2019

👎1

Thank you but already read, it was my first implementation. Work well with Android, but I don't understand why that crash with iOS. I also read many and many topics, tutorials,... since one month.

But anyways, I'll read it again

Gonath on 23 Mar 2019

Native side takes lot of times than js side for initialization. Implementation of iOS is different from the Android.

When you use any native plugins, you have to wait the device_ready event. The platform.ready() wraps that event.

wf9a5m75 on 24 Mar 2019

Dear,

I'm coming back after rebuilding new versions from scratch with only the google map (nothing else).

Android: OK
Browser: OK
IOS: not ok, same problem. The app go back in the background. When I take the app to the front , again, go back in the background.

What are my steps:

ionic start myApp sidemenu --type=angular
ionic cordova prepare ios
ionic cordova prepare android
npm install @ionic-native/core@beta
npm install @ionic-native/google-maps@beta
ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="my android key" --variable API_KEY_FOR_IOS="my IOS key"

Clean my home page:

<ion-content>
  <div id="map_canvas"></div>
</ion-content>

Set height for the

element

#map_canvas {
  height: 90%
}

My ts page:

import { Component, OnInit } from '@angular/core';

import { Platform } from '@ionic/angular';
import { GoogleMaps, GoogleMap, Environment } from '@ionic-native/google-maps/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})


export class HomePage implements OnInit {
  map: GoogleMap;
  constructor(private platform: Platform) {
    Environment.setBackgroundColor("blue");
  }

  async ngOnInit() {
    await this.platform.ready();
    await this.loadMap();
  }

  loadMap() {
    console.log("tests")
    this.map = GoogleMaps.create('map_canvas');
  }
}

Gonath on 31 Mar 2019

👍1

I tested the multibranch version and the stable version.

When running the app, before to go back in the background, I can see the blue background.

I think I forget nothing for the steps performed. For every step, I copied-pasted into a bloc-note the executed cli-commands to know what are my steps.

Gonath on 31 Mar 2019

Hello which Cordova IOS version are you using? I got very similar issues
with 4.5.5 but they went away after upgrading to 5.0.0. can you please show
us the output of the ionic info command?

On Sun, Mar 31, 2019, 19:01 Jonathan Denies notifications@github.com
wrote:

I tested the multibranch version and the stable version.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-native-google-maps/issues/189#issuecomment-478359071,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABJzAADA3o0pWAzw1uqIAu_6MB72569gks5vcOnjgaJpZM4cFCg_
.

battika on 1 Apr 2019

❤4

I have the 4.5.5 too

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (my path ionic modules)
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.7
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.7
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic 5.3.0, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 7 other plugins)

System:

   NodeJS : v10.13.0 ( my path nodejs)
   npm    : 6.4.1
   OS     : Windows 10

Gonath on 1 Apr 2019

I'll test an upgrade to 5.0.0 this afternoon.

Gonath on 1 Apr 2019

I am very interested in your testing results. Please keep us posted.
Upgrade to version 5 helped me but it broke the support for the onesignal
plugin I am using too. But that is a different issue not relevant here.

On Mon, Apr 1, 2019, 08:49 Jonathan Denies notifications@github.com wrote:

I'll test an upgrade to 5.0.0 this afternoon.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-native-google-maps/issues/189#issuecomment-478456833,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABJzANqB-baGIjRSAEEJKZvsuHAjFxvwks5vcav1gaJpZM4cFCg_
.

battika on 1 Apr 2019

Thanks you very much !!!!! That works !!

I never supposed that the CLI will install an older version.

Gonath on 1 Apr 2019

You are welcome, glad it worked after upgrading to IOS 5.0.0

battika on 5 Apr 2019

I'm still having this issue in ios 5.0.1, but only in ONE app, any ideas why? Already read the documentation and got this plugin working in several apps before. Already tried reinstalling the ios platform, reinstalling the plugin, installing the multiple_maps branch, ..
API Keys are ok and working in another app (5.0.1, too).