Using an image for the MarkerIcon (icon pin marker) fails on iOS

[developerjohan01]

I'm submitting a ... (check one with "x")

• [ x] any problem or bug report

If you choose 'problem or bug report', please select OS: (check one with "x")

• [ ] Android
• [x ] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

$ cordova plugin list
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.4.6 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.2.0 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

✔ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)  : 4.1.2 (/Users/user/.nvm/versions/node/v10.9.0/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 5 other plugins)

System:

   ios-deploy : 2.0.0
   NodeJS     : v10.9.0 (/Users/user/.nvm/versions/node/v10.9.0/bin/node)
   npm        : 6.2.0
   OS         : macOS High Sierra
   Xcode      : Xcode 10.0 Build version 10A255

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

"@ionic-native/core": "^4.15.0",
"cordova-plugin-googlemaps": "^2.4.6",

Current behavior:

If using

const icon: MarkerIcon =  {
            url: 'assets/imgs/box-pin.png'
        };

App hangs/crashes in iOS simulator and MarkerIcons are not displayed/used on the device.

The App works correctly in browser and on android.

Expected behavior:

App should show/display the used icon/pin/marker.

I have this problem in my client project and can recreate this problem with a new ionic project and using the sample code from here https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/README.md plus adding the reference to the icon.

  loadMap() {

    // This code is necessary for browser
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': 'my-key',
      'API_KEY_FOR_BROWSER_DEBUG': 'my-key'
    });

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

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

    let marker: Marker = this.map.addMarkerSync({
      title: 'Ionic',
      icon: {
        url: 'assets/imgs/box-pin.png'
      },
      animation: 'DROP',
      position: {
        lat: 43.0741904,
        lng: -89.3809802
      }
    });

    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('clicked');
    });
  }

In Xcode the following error messages are displayed Simulator:

2018-10-10 21:32:29.278183+0200 TabMapTest[35093:21034028] Apache Cordova native platform version 4.5.5 is starting.
2018-10-10 21:32:29.278606+0200 TabMapTest[35093:21034028] Multi-tasking -> Device: YES, App: YES
2018-10-10 21:32:29.286987+0200 TabMapTest[35093:21034028] CDVWKWebViewEngine: trying to inject XHR polyfill
2018-10-10 21:32:29.317822+0200 TabMapTest[35093:21034028] CDVWKWebViewEngine will reload WKWebView if required on resume
2018-10-10 21:32:29.317987+0200 TabMapTest[35093:21034028] Using Ionic WKWebView
2018-10-10 21:32:29.320001+0200 TabMapTest[35093:21034028] [CDVTimer][console] 0.342011ms
2018-10-10 21:32:29.320219+0200 TabMapTest[35093:21034028] [CDVTimer][handleopenurl] 0.094056ms
2018-10-10 21:32:29.322142+0200 TabMapTest[35093:21034028] [CDVTimer][intentandnavigationfilter] 1.818061ms
2018-10-10 21:32:29.322297+0200 TabMapTest[35093:21034028] [CDVTimer][gesturehandler] 0.051022ms
2018-10-10 21:32:29.328290+0200 TabMapTest[35093:21034028] [CDVTimer][statusbar] 5.900025ms
2018-10-10 21:32:29.331894+0200 TabMapTest[35093:21034028] [CDVTimer][splashscreen] 3.499985ms
2018-10-10 21:32:29.332477+0200 TabMapTest[35093:21034028] CDVIonicKeyboard: resize mode 1
2018-10-10 21:32:29.333392+0200 TabMapTest[35093:21034028] [CDVTimer][keyboard] 1.368046ms
2018-10-10 21:32:29.336292+0200 TabMapTest[35093:21034028] [CDVTimer][cordovagooglemaps] 2.759933ms
2018-10-10 21:32:29.336412+0200 TabMapTest[35093:21034028] [CDVTimer][TotalPluginStartup] 16.837955ms
2018-10-10 21:32:30.828672+0200 TabMapTest[35093:21034028] Ionic Native: deviceready event fired after 539 ms
2018-10-10 21:33:37.135846+0200 TabMapTest[35093:21034028] [Accessibility] WKContentView[@] set up: @ pid: @ MACH_PORT 478266368
2018-10-10 21:38:14.777482+0200 TabMapTest[35093:21034028] ionViewDidLoad MapPage
CoreData: annotation:  Failed to load optimized model at path '/Users/user/Library/Developer/CoreSimulator/Devices/BEAFEEB8-7705-4BC8-9E2B-282FE47E3706/data/Containers/Bundle/Application/4972D4F8-90D4-4B08-A62D-AE1FFCAC7C77/TabMapTest.app/GoogleMaps.bundle/GMSCacheStorage.momd/StorageWithTileProto.omo'
CoreData: annotation:  Failed to load optimized model at path '/Users/user/Library/Developer/CoreSimulator/Devices/BEAFEEB8-7705-4BC8-9E2B-282FE47E3706/data/Containers/Bundle/Application/4972D4F8-90D4-4B08-A62D-AE1FFCAC7C77/TabMapTest.app/GoogleMaps.bundle/GMSCacheStorage.momd/StorageWithTileProto.omo'
CoreData: annotation:  Failed to load optimized model at path '/Users/user/Library/Developer/CoreSimulator/Devices/BEAFEEB8-7705-4BC8-9E2B-282FE47E3706/data/Containers/Bundle/Application/4972D4F8-90D4-4B08-A62D-AE1FFCAC7C77/TabMapTest.app/GoogleMaps.bundle/GMSCacheStorage.momd/StorageWithTileProto.omo'
2018-10-10 21:38:15.296284+0200 TabMapTest[35093:21034028] GLRenderTarget::CreateFramebuffer() failed.
2018-10-10 21:38:16.106292+0200 TabMapTest[35093:21034028] Google Maps SDK for iOS version: 2.7.30514.0
2018-10-10 21:38:16.111894+0200 TabMapTest[35093:21040545] [BoringSSL] nw_protocol_boringssl_get_output_frames(1301) [C1.1:2][0x7fbe1c013fb0] get output frames failed, state 8196
2018-10-10 21:38:16.112116+0200 TabMapTest[35093:21040545] [BoringSSL] nw_protocol_boringssl_get_output_frames(1301) [C1.1:2][0x7fbe1c013fb0] get output frames failed, state 8196
2018-10-10 21:38:16.112730+0200 TabMapTest[35093:21040545] TIC Read Status [1:0x0]: 1:57
2018-10-10 21:38:16.112849+0200 TabMapTest[35093:21040545] TIC Read Status [1:0x0]: 1:57
2018-10-10 21:38:16.214526+0200 TabMapTest[35093:21034028] --->animation = DROP
2018-10-10 21:38:16.222807+0200 TabMapTest[35093:21040532] TIC Read Status [3:0x6000017249c0]: 1:57
2018-10-10 21:38:16.225666+0200 TabMapTest[35093:21040545] [fail] url = http://localhost:8080//./assets/imgs/box-pin.png
2018-10-10 21:38:16.228018+0200 TabMapTest[35093:21040545] *** Terminating app due to uncaught exception 'GMSThreadException', reason: 'The API method must be called from the main thread'

Device:

2018-10-11 15:36:40.503052+0200 flexistore[7463:905168] [fail] url = http://localhost:8080//./assets/imgs/flexistore-pin-small.png
2018-10-11 15:36:40.629690+0200 flexistore[7463:904630] ERROR: map_1_360977126838 Can not load image from 'http://localhost:8080//./assets/imgs/box-pin.png'.

A workaround is to use BASE64 encoded images for the icon. I finally manage to get that working on all platforms.

[wf9a5m75]

Please try the multiple_maps branch version. If it doesn't help, please share the project files on GitHub.

[wf9a5m75]

ping

[developerjohan01]

@wf9a5m75 I have not had a chance to try out your suggestion yet. I will give it i try let you know.

NOTE that I am now using BASE64 encoded images for the icon, which is working on all platforms, so this isn't critical for me anymore.

const icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADI... `

[wf9a5m75]

Ok. As far as I test, I can not confirm your issue on my side with the multiple_maps branch version. I just keep your issue in mind. Thank you for reporting.

[chadevans]

@wf9a5m75 I think this has to do with Ionic Webview.

I updated from Ionic Webview 1.x to 2.x because of a security alert. Then, I have this issue on iOS. I believe the web server has different requirements for fetching a local file on 2.x.