ionic-team / ionic-native-google-maps

Google maps plugin for Ionic Native
Other
221 stars 125 forks source link

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

Closed Gonath closed 5 years ago

Gonath commented 5 years ago

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"
    ]
  }
}
Gonath commented 5 years ago

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

async ngAfterViewInit() {
    this.platform.ready().then(() => {
      this.loadMap();
    });
  }
wf9a5m75 commented 5 years ago

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

Gonath commented 5 years ago

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

Gonath commented 5 years ago

Can you un-closed this topic ?

wf9a5m75 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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:

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 commented 5 years ago

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 commented 5 years ago

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

Gonath commented 5 years ago

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 commented 5 years ago

I'll test an upgrade to 5.0.0 this afternoon.

battika commented 5 years ago

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

Gonath commented 5 years ago

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

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

battika commented 5 years ago

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

mathisschuelingkamp commented 4 years ago

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