Ionic 4 - IOS - Google map native - "Crash" #189

Gonath · 2019-03-23T17:25:27Z

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"
    ]
  }
}

The text was updated successfully, but these errors were encountered:

Gonath · 2019-03-23T17:28:39Z

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

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

wf9a5m75 · 2019-03-23T17:53:06Z

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

Gonath · 2019-03-23T18:02:04Z

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

Gonath · 2019-03-23T18:04:27Z

Can you un-closed this topic ?

wf9a5m75 · 2019-03-23T18:05:24Z

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

Gonath · 2019-03-23T18:07:56Z

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

wf9a5m75 · 2019-03-23T23:38:22Z

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.

Gonath · 2019-03-31T17:00:05Z

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 · 2019-03-31T17:01:23Z

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.

battika · 2019-04-01T05:33:06Z

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 ***@***.***> 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 <#189 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABJzAADA3o0pWAzw1uqIAu_6MB72569gks5vcOnjgaJpZM4cFCg_> .

Gonath · 2019-04-01T06:48:13Z

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 (cordova-lib@8.1.1)
   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 · 2019-04-01T06:49:25Z

I'll test an upgrade to 5.0.0 this afternoon.

battika · 2019-04-01T07:26:54Z

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 ***@***.***> 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 <#189 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABJzANqB-baGIjRSAEEJKZvsuHAjFxvwks5vcav1gaJpZM4cFCg_> .

Gonath · 2019-04-01T20:02:09Z

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

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

battika · 2019-04-05T06:45:11Z

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

mathisschuelingkamp · 2019-10-14T11:34:27Z

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

wf9a5m75 closed this as completed Mar 23, 2019

battika mentioned this issue Apr 5, 2019

The application closes when trying to load the map on iOS with ionic 3 #196

Closed

6 tasks

wf9a5m75 mentioned this issue Apr 5, 2019

no longer works with Cordova-IOS 4.5.5 ? #197

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ionic 4 - IOS - Google map native - "Crash" #189

Ionic 4 - IOS - Google map native - "Crash" #189

Gonath commented Mar 23, 2019

Gonath commented Mar 23, 2019

wf9a5m75 commented Mar 23, 2019

Gonath commented Mar 23, 2019

Gonath commented Mar 23, 2019

wf9a5m75 commented Mar 23, 2019

Gonath commented Mar 23, 2019

wf9a5m75 commented Mar 23, 2019

Gonath commented Mar 31, 2019 •

edited

Loading

Gonath commented Mar 31, 2019 •

edited

Loading

battika commented Apr 1, 2019 via email

Gonath commented Apr 1, 2019

Gonath commented Apr 1, 2019

battika commented Apr 1, 2019 via email

Gonath commented Apr 1, 2019

battika commented Apr 5, 2019

mathisschuelingkamp commented Oct 14, 2019

Ionic 4 - IOS - Google map native - "Crash" #189

Ionic 4 - IOS - Google map native - "Crash" #189

Comments

Gonath commented Mar 23, 2019

Gonath commented Mar 23, 2019

wf9a5m75 commented Mar 23, 2019

Gonath commented Mar 23, 2019

Gonath commented Mar 23, 2019

wf9a5m75 commented Mar 23, 2019

Gonath commented Mar 23, 2019

wf9a5m75 commented Mar 23, 2019

Gonath commented Mar 31, 2019 • edited Loading

Gonath commented Mar 31, 2019 • edited Loading

battika commented Apr 1, 2019 via email

Gonath commented Apr 1, 2019

Gonath commented Apr 1, 2019

battika commented Apr 1, 2019 via email

Gonath commented Apr 1, 2019

battika commented Apr 5, 2019

mathisschuelingkamp commented Oct 14, 2019

Gonath commented Mar 31, 2019 •

edited

Loading

Gonath commented Mar 31, 2019 •

edited

Loading