App is crashed when GoogleMaps create

I’m submitting a … (check one with “x”)

• question
• any problem or bug report
• feature request

If you choose ‘problem or bug report’, please select OS: (check one with “x”)

• Android
• iOS

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 2.5.0 "Google Maps SDK for iOS"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-crop 0.3.1 "CropPlugin"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-facebook4 1.9.1 "Facebook Connect"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-googlemaps 2.1.1 "cordova-plugin-googlemaps"
cordova-plugin-ios-localized-strings 1.0.5 "Cordova iOS Localized Strings"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.4-dev "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"
telerik-imagepicker 2.1.9 "ImagePicker"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

Current behavior: I’ cant show Google Map on iOS. App is crashed when GoogleMaps create. Have you hit on any possible causes of the problem?

Expected behavior:

Screen capture or video record:

Related code, data or error log (please format your code or data):

My Ionic conditions

cli packages: (/usr/local/var/nodebrew/node/v8.5.0/lib/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.7
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.3.0

System:

    ios-deploy : 1.9.2
    ios-sim    : 5.1.0
    Node       : v8.5.0
    npm        : 5.3.0
    OS         : macOS High Sierra
    Xcode      : Xcode 9.2 Build version 9C40b

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

  "dependencies": {
    "@angular/common": "4.1.2",
    "@angular/compiler": "4.1.2",
    "@angular/compiler-cli": "4.1.2",
    "@angular/core": "4.1.2",
    "@angular/forms": "4.1.2",
    "@angular/http": "4.1.2",
    "@angular/platform-browser": "4.1.2",
    "@angular/platform-browser-dynamic": "4.1.2",
    "@ionic-native/camera": "^3.12.1",
    "@ionic-native/core": "4.5.2",
    "@ionic-native/crop": "^4.4.2",
    "@ionic-native/facebook": "^4.2.1",
    "@ionic-native/file": "^3.12.1",
    "@ionic-native/google-maps": "^4.5.2",
    "@ionic-native/image-picker": "^3.12.1",
    "@ionic-native/keyboard": "^4.4.2",
    "@ionic-native/splash-screen": "3.10.2",
    "@ionic-native/status-bar": "3.10.2",
    "@types/lodash": "^4.14.85",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.5.1",
    "@types/uuid": "^3.4.2",
    "angularfire2": "^5.0.0-rc.3",
    "com.synconset.imagepicker": "https://github.com/Telerik-Verified-Plugins/ImagePicker",
    "cordova-ios": "4.4.0",
    "cordova-plugin-camera": "~2.4.1",
    "cordova-plugin-console": "1.0.5",
    "cordova-plugin-crop": "^0.4.0",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-facebook4": "~1.9.1",
    "cordova-plugin-file": "~4.3.3",
    "cordova-plugin-googlemaps": "^2.1.1",
    "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
    "cordova-plugin-ios-localized-strings": "^1.0.5",
    "cordova-plugin-splashscreen": "~4.0.1",
    "cordova-plugin-statusbar": "git+https://github.com/apache/cordova-plugin-statusbar.git",
    "cordova-plugin-telerik-imagepicker": "https://github.com/Telerik-Verified-Plugins/ImagePicker",
    "cordova-plugin-whitelist": "1.3.1",
    "dotenv": "^4.0.0",
    "firebase": "^4.6.0",
    "ionic-angular": "3.3.0",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.11"
  },

map.ts

import { GoogleMaps,  GoogleMap,  GoogleMapsEvent,  GoogleMapOptions,  CameraPosition,  MarkerOptions,  Marker } from '@ionic-native/google-maps';
import { Component } from "@angular/core/";

@Component({
  selector: 'map',
  templateUrl: 'map.html'
})
export class MapPage {
  map: GoogleMap;
  constructor() { }

  ionViewDidLoad() {
    this.loadMap();
  }

 loadMap() {

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

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('Map is ready!');
      });
  }
}

map.html

<ion-content>
  <div id="map_canvas" style="height: 100%;"></div>
</ion-content>

And google map api is valid status. in my google api developers console.

[fmendoza]

Got it working using the short attribute in the name tag from config.xml.

In my case I updated my app as follows

From:

<name>مندوبك</name>

To:

<name short="مندوبك">Salesman</name>

Thank you @wf9a5m75

[amsimoes]

For more detailed information, this is the comment on the file “CordovaGoogleMaps.m”:

/*---------------------------------------------------------------------------------------
   * If CFBundleExecutable is not English, the Google Maps SDK for iOS will crash.
   * So must be English.
   *
   * If you want to use non-english name for your app, you need to change your config.xml like this.
   *
   * <?xml version='1.0' encoding='utf-8'?>
   * <widget id="(package name)" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   *   <name short="(non-english app name)">(english app name)</name>
   *---------------------------------------------------------------------------------------*/

If your app includes any non-english character, just name it like this (on your config.xml): <name short="(non-english app name)">(english app name)</name>

Cheers!