Cordova-plugin-googlemaps: Map crashes when deploying a marker with a custom markerIcon

[cigogma]

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

• [ ] question
• [X] any problem or bug report

OS: (check one with "x")

• [ ] Android
• [X] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-advanced-http 2.0.1 "Advanced HTTP plugin"
cordova-plugin-android-permissions 1.0.0 "Permissions"
cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-crop 0.3.1 "CropPlugin"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-globalization 1.11.0 "Globalization"
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.3 "cordova-plugin-ionic-webview"
cordova-plugin-nativeaudio 3.0.9 "Cordova Native Audio"
cordova-plugin-request-location-accuracy 2.2.3 "Request Location Accuracy"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.5.1 "Cordova sqlite storage plugin"
cordova.plugins.diagnostic 4.0.10 "Diagnostic"

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.17.0"
 "@ionic-native/google-maps": "^4.8.2"

Current behavior:
When the map loads the app is supposed to load the map and also after the map loads a marker with a MarkerIcon after the map loads and tries to load the marker it crashes (without the marker icon is working just right)

Expected behavior:
Its not supposed to crash

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

 2018-11-19 18:59:08.226605+0200 itaxi-Driver[31401:313193] TIC Read Status [3:0x60c000174e80]: 1:57
2018-11-19 18:59:08.229664+0200 itaxi-Driver[31401:313234] [fail] url = http://localhost:8080/assets/imgs/markers/me.png
2018-11-19 18:59:08.234765+0200 itaxi-Driver[31401:313234] *** Terminating app due to uncaught exception 'GMSThreadException', reason: 'The API method must be called from the main thread'
*** First throw call stack:
(
    0   CoreFoundation                      0x000000010a3f11e6 __exceptionPreprocess + 294
    1   libobjc.A.dylib                     0x00000001092f1031 objc_exception_throw + 48
    2   CoreFoundation                      0x000000010a466975 +[NSException raise:format:] + 197
    3   itaxi-Driver                        0x0000000101faa1a2 -[GMSOverlay setMap:] + 89
    4   itaxi-Driver                        0x0000000101e1238c __52-[PluginMarker setIcon_:iconProperty:callbackBlock:]_block_invoke.595 + 348
    5   itaxi-Driver                        0x0000000101e14de3 __53-[PluginMarker downloadImageWithURL:completionBlock:]_block_invoke_2 + 339
    6   CFNetwork                           0x0000000109bb2c46 __75-[__NSURLSessionLocal taskForClass:request:uploadFile:bodyData:completion:]_block_invoke + 19
    7   CFNetwork                           0x0000000109bb2497 __49-[__NSCFLocalSessionTask _task_onqueue_didFinish]_block_invoke + 147
    8   Foundation                          0x0000000107db3363 __NSBLOCKOPERATION_IS_CALLING_OUT_TO_A_BLOCK__ + 7
    9   Foundation                          0x0000000107db31ca -[NSBlockOperation main] + 68
    10  Foundation                          0x0000000107db16b2 -[__NSOperationInternal _start:] + 766
    11  libdispatch.dylib                   0x000000010ac76848 _dispatch_client_callout + 8
    12  libdispatch.dylib                   0x000000010ac7be14 _dispatch_block_invoke_direct + 592
    13  libdispatch.dylib                   0x000000010ac76848 _dispatch_client_callout + 8
    14  libdispatch.dylib                   0x000000010ac7be14 _dispatch_block_invoke_direct + 592
    15  libdispatch.dylib                   0x000000010ac7bba4 dispatch_block_perform + 109
    16  Foundation                          0x0000000107dad75b __NSOQSchedule_f + 337
    17  libdispatch.dylib                   0x000000010ac76848 _dispatch_client_callout + 8
    18  libdispatch.dylib                   0x000000010ac7cb35 _dispatch_continuation_pop + 967
    19  libdispatch.dylib                   0x000000010ac7afb0 _dispatch_async_redirect_invoke + 780
    20  libdispatch.dylib                   0x000000010ac823c8 _dispatch_root_queue_drain + 664
    21  libdispatch.dylib                   0x000000010ac820d2 _dispatch_worker_thread3 + 132
    22  libsystem_pthread.dylib             0x000000010b16d169 _pthread_wqthread + 1387
    23  libsystem_pthread.dylib             0x000000010b16cbe9 start_wqthread + 13
)
libc++abi.dylib: terminating with uncaught exception of type NSException

Code:

constructor(private location:LocationProvider,private events:Events) {
    this.loadMap();
  }

  loadMap() {
    let mapOptions: GoogleMapOptions = {
      camera: {
         target: this.location.getLastRecord(),
         zoom: 18,
         tilt: 0
       }
    };
    this.map = GoogleMaps.create('map', mapOptions);
    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(()=>{
      this.mapReady();
    });
  }
  calculateRotation(){

  }

  mapReady(){
    this.setMyMarker();
  }

  setMyMarker(){
    let available:MarkerIcon={
      url: "assets/imgs/markers/me.png",
      size: {
          width: 30,
          height: 30,
      }
    }

    let options:MarkerOptions={
      position: this.location.getLastRecord(),
      disableAutoPan: true,
      icon: available
    }
    this.map.addMarker(options).then((marker)=>{
      this.me = marker;
      this.events.subscribe('location:update',(location:ILatLng )=>{
        this.me.setPosition(location);
      });
      this.events.subscribe('ride:new',()=>{
        let unavailable:MarkerIcon={
          url: "assets/imgs/markers/me-unavailable.png",
          size: {
              width: 30,
              height: 30,
          }
        }
        this.me.setIcon(unavailable);
      });
      setTimeout(()=>this.map.setCameraTarget(this.me.getPosition()),500);
    });
  }

[wf9a5m75]

Please share your project files on github.

[cigogma]

I can't share the project please tell me what files are you looking for.

[wf9a5m75]

What would you do next if you were I?

[cigogma]

What would you do next if you were I?

we sent you a invitation for the project.

[wf9a5m75]

Thanks, but I had no enough time today, and have no time until next Monday in the US (holidays). Thank you for waiting.

[cigogma]

Solved. For some reason I had to put "www/assets/.." at the marker icon url.

[zaarheed]

For anyone else that comes across this, the solution applies to MarkerClusters too.

ie the path to any icons for Markers and MarkerClusters must be in the format www/assets/...

@wf9a5m75 do you think this may be worth mentioning in the docs? All images in my Ionic app are referenced as ./assets/... except those used in the Google Maps plugin. I think the addition to the docs may save devs a lot of confusion.

[kharatps02]

@zaarheed This is working on IOS but not on Android, getting below error.
E/AsyncLoadImage: Can not load the file from 'www/assets/images/blue-pin.png

[kleeb]

Definitely makes sense to stress this difference in the docs. I make a different cluster settings for Android and iOS

[Hanzofm]

Same issue here:

https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2526

This issue only reproduces on iOS and ONLY when the release is with --prod flag.

[BeatriceThalo]

I solved using

const myIconUrl = 'assets/myIcon.png';
...
.addMarkerCluster({
    markers: {
        // icon: myIconUrl, // Don't use
        icon: `${location.href.includes('android') ? 'file:///android_asset/www/' : 'www/'}${myIconUrl}`
        ...
    }, 
    icons: [{ min: 2, max: 20 }]
})

based on suggestion here (#1389). Otherwise, using cordova-plugin-googlemaps 2.5.3 with only myIconUrl, android shows default pins instead of custom marker icons, and some iOS launches won't show any marker icons and some iOS launches correctly show the custom icons.