Ionic-native: Google Maps Native - Error: EXCEPTION: Uncaught (in promise): [object Object])

[jgw96]

_From @HamzaLJ on January 8, 2017 12:50_

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[ x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I've installed the plugin as instructed on the official docs :
https://ionicframework.com/docs/v2/native/google-maps/

However, I receive this:

EXCEPTION: Uncaught (in promise): [object Object])

I've Googled it, it seems that many users has the same issue, so I believe that it's a bug that should be reported.

Expected behavior:

Show the map.

Related code:

SAME ONE in the documentation.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.3.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v4.4.7
Xcode version: Xcode 8.0 Build version 8A218a

_Copied from original issue: driftyco/ionic#9915_

[jgw96]

_From @jsayol on January 9, 2017 11:23_

Hi @HamzaLJ! It might be better if you open this issue on the ionic-native repo instead: https://github.com/driftyco/ionic-native

[itthiporn]

same issue

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed

[ihadeed]

I'm unable to reproduce this issue. Using Ionic Native v2.4.0 and Ionic Framework 2 RC5.

[LeVadim]

Same Issue

[ihadeed]

@LeVadim I need steps to reproduce this issue and/or more information about the error. The information provided isn't enough to qualify as a bug.

[mhhansen]

same issue here with this system info:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.3
Xcode version: Xcode 8.2.1 Build version 8C1002

And packages:

  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "ionic-angular": "2.0.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26",
    "sw-toolbox": "3.4.0"
  },

Started a proj by running

$ ionic start --v2 myApp sidemenu

Then, installed cordova-plugin-googlemaps as pointed in native googlemaps docs:

$ ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="XXXX" --variable API_KEY_FOR_IOS="XXXX"

Created a page including the code in page above under the "Usage" heading.
Then ran: _ionic serve_

When access to the page get this first error (among others that comes after it):

Error: Uncaught (in promise): [object Object]
    at s (polyfills.js:3)
    at s (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (ng_zone.js:227)
    at t.invokeTask (polyfills.js:3)
    at e.runTask (polyfills.js:3)
    at i (polyfills.js:3)
    at HTMLButtonElement.invoke (polyfills.js:3)

Which I believe, is produced by the _one()_ method:

map.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!'));

Here's a shot of my console:
http://tinypic.com/r/157lugm/9

Here's the source code from the .ts page:
http://pastebin.com/Bdat8PeN

[ihadeed]

@mhhansen the plugin wont work on ionic serve. You have to run it on Android or iOS device/simulator.

[mhhansen]

Well, that makes sense 😆
Sorry about that @ihadeed

I've build it and run the emulator iphone6, get the header of the location page, and where should be the map there's a black screen (like maps doesn't load).
(ionic build ios + ionic emulate ios --target="iPhone-6s")

Console shows no errors and the "Map is ready!".
So, prob it's something in my end (API configs or code), not a bug.

I'm getting closer, thanks again!

[ihadeed]

@mhhansen does the element have a defined height CSS property? do you see Google's logo at all or just a blank screen?

[mhhansen]

thanks for getting back!
just a black area with the height (100%) of the div#map
<div #map id="map" style="height:100%;"></div>

https://postimg.org/image/66z69zwx9/

plus, I'm seeing the API request in my Google Console and after the request happens I'm seeing an error in my local system.log:
"You don’t have permission to save the file “CallDirectory” in the folder “Library”
Unable to initialize CXCallDirectoryStore for reading and writing: Error Domain=NSCocoaErrorDomain Code=513 "You don’t have permission to save the file “CallDirectory” in the folder “Library”

so maybe map is not showing up because it can't save images of the map in emulator's cache..

[LeVadim]

By the way. I solved this issue simply by running it on emulator/device since this is Native plugin, it must be emulated on native device.
Thanks!

[mhhansen]

my issue seems to be related to a black layer of nav-decor,
i'll go in this direction https://github.com/driftyco/ionic/issues/7205

thanks @ihadeed @LeVadim for your help!

[benweiser]

Same issue. While it works in the emulator, it should fail gracefully in browser like other Cordova plugins do with a console warning

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.2
Xcode version: Xcode 8.2.1 Build version 8C1002

{
  "name": "REDACTED",
  "author": "REDACTED",
  "homepage": "https://www.REDACTED.com/",
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.4.5",
    "@angular/compiler": "2.4.5",
    "@angular/compiler-cli": "2.4.5",
    "@angular/core": "2.4.5",
    "@angular/forms": "2.4.5",
    "@angular/http": "2.4.5",
    "@angular/platform-browser": "2.4.5",
    "@angular/platform-browser-dynamic": "2.4.5",
    "@angular/platform-server": "2.4.5",
    "@ionic/storage": "1.1.6",
    "@types/localforage": "0.0.33",
    "@types/lodash": "4.14.50",
    "ionic-angular": "2.0.0",
    "ionic-native": "2.4.0",
    "ionicons": "~3.0.0",
    "localforage": "^1.4.3",
    "lodash": "^4.17.4",
    "rxjs": "5.0.1",
    "zone.js": "~0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.0.0",
    "typescript": "^2.1.5"
  },
  "cordovaPlugins": [
    "cordova-plugin-appavailability",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-geolocation",
    "cordova-plugin-inappbrowser",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "cordova-plugin-x-socialsharing",
    "cordova-plugin-whitelist",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "android",
    "ios"
  ],
  "description": "REDACTED"
}

[mhhansen]

@benweiser I'm with you... but seems to be more like a nice-to-have, rather than a bug.. right?

[dimitri320]

I've got the exact same problem. I'm getting a black screen and no Google Map. Anyone many any further progress on this?

[alexbonhomme]

hey guys,

I got the exact same problem described in the initial post. Except that I'm on a device...

EXCEPTION: Uncaught (in promise): [object Object]
console.(anonymous function) @ console.js:26
ErrorHandler.handleError @ error_handler.js:54
IonicErrorHandler.handleError @ ionic-error-handler.js:58
next @ application_ref.js:348
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:333
onHandleError @ ng_zone.js:294
t.handleError @ polyfills.js:3
e.runGuarded @ polyfills.js:3
r @ polyfills.js:3
i @ polyfills.js:3
console.js:26 ORIGINAL STACKTRACE:
console.(anonymous function) @ console.js:26
ErrorHandler.handleError @ error_handler.js:59
IonicErrorHandler.handleError @ ionic-error-handler.js:58
next @ application_ref.js:348
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:333
onHandleError @ ng_zone.js:294
t.handleError @ polyfills.js:3
e.runGuarded @ polyfills.js:3
r @ polyfills.js:3
i @ polyfills.js:3
console.js:26 Error: Uncaught (in promise): [object Object]
    at v (polyfills.js:3)
    at s (polyfills.js:3)
    at s (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (ng_zone.js:264)
    at t.invokeTask (polyfills.js:3)
    at e.runTask (polyfills.js:3)
    at i (polyfills.js:3)

It seems appear after than the plugin.google.maps.event.MAP_READY is fired.

map.on(plugin.google.maps.event.MAP_READY, mapInstance => {
    // CRASH HERE
});

BUT I don't get this bug on every device... On my Nexus 5 it works like a charm, but a ZU2131 it crash. The map is actually usable, but every geolocation plugin crash. Both smartphone are on Android 6.0.1.

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v4.6.1
Xcode version: Xcode 8.2.1 Build version 8C1002

This is a nightmare :')