Cordova-plugin-googlemaps: GMSThreadException

[allanpoppe]

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

• [ ] question
• [x] any problem or bug report
• [ ] feature request

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

• [ ] Android
• [x] iOS

cordova information: (run $> cordova plugin list)

branch-cordova-sdk 2.6.24 "branch-cordova-sdk"
com.googlemaps.ios 2.6.0 "Google Maps SDK for iOS"
com.telerik.plugins.nativepagetransitions 0.6.5 "Native Page Transitions"
cordova-android-support-gradle-release 1.3.0 "cordova-android-support-gradle-release"
cordova-clipboard 1.1.1 "Clipboard"
cordova-plugin-actionsheet 2.3.3 "ActionSheet"
cordova-plugin-add-swift-support 1.7.2 "AddSwiftSupport"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-appcenter-analytics 0.1.3 "App Center Analytics for Cordova"
cordova-plugin-appcenter-crashes 0.1.3 "App Center Crashes for Cordova"
cordova-plugin-appcenter-shared 0.1.3 "App Center shared code for Cordova"
cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-calendar 5.0.0 "Calendar"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-console 1.1.0 "Console"
cordova-plugin-crop 0.0.3 "CropPluginWithRatio"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-dialogs 2.0.1 "Notification"
cordova-plugin-facebook4 1.10.1 "Facebook Connect"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-filepicker 1.1.4 "File Picker"
cordova-plugin-firebase-analytics 0.12.1 "FirebaseAnalyticsPlugin"
cordova-plugin-googlemaps 2.3.0-rc1 "cordova-plugin-googlemaps"
cordova-plugin-headercolor 1.0 "HeaderColor"
cordova-plugin-inappbrowser 2.0.2 "InAppBrowser"
cordova-plugin-ionic-webview 1.1.8 "Ionic's WKWebView Engine"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-qrscanner 2.5.0 "QRScanner"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-vibration 3.1.0 "Vibration"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.3.2 "SocialSharing"
cordova-support-google-services 1.0.0 "cordova-support-google-services"
es6-promise-plugin 4.2.2 "Promise"
ionic-plugin-keyboard 2.2.1 "Keyboard"
onesignal-cordova-plugin 2.3.3 "OneSignal Push Notifications"
uk.co.workingedge.phonegap.plugin.launchnavigator 4.2.0 "Launch Navigator"

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.5.2",
"@ionic-native/google-maps": "4.7.0"

Code:

async loadMap() {
    const mapOptions: GoogleMapOptions = {
        controls: {
            mapToolbar: false,
            compass: false
        },
        gestures: {
            scroll: true
        },
        camera: {
            target: {
                lat: this.latitude,
                lng: this.longitude
            },
            zoom: zoomPadrao,
            tilt: 0
        }
    };

    this.map = GoogleMaps.create('map_canvas', mapOptions);
    try {
        await this.map.one(GoogleMapsEvent.MAP_READY);
    } catch (e) {
        this.auxiliarService.treatError(e);
    }

    this.loading = false;
    this.loadMarkers();

    this.subscriptions.add(
        this.map.on(GoogleMapsEvent.MAP_CLICK)
            .subscribe(() => {
                this.selectedMarker = null;
                this.backToCenterEnabled = true;
            })
    )

    this.subscriptions.add(
        this.map.on(GoogleMapsEvent.CAMERA_MOVE_START)
            .subscribe(() => {
                this.backToCenterEnabled = true;
            })
    )

    this.subscriptions.add(
        this.map.on(GoogleMapsEvent.CAMERA_MOVE_END)
            .subscribe(() => {
                if (!this.selectedMarker) return;
                let selectedMarkerPosition = this.selectedMarker.getPosition();
                let cameraPosition: CameraPosition<any> = this.map.getCameraPosition();
                if (selectedMarkerPosition.lat.toFixed(4) == cameraPosition.target.lat.toFixed(4) && selectedMarkerPosition.lng.toFixed(4) == cameraPosition.target.lng.toFixed(4))
                    this.backToCenterEnabled = false;
            })
    )
}

async loadMarkers() {
    const promises = [];
    this.places.forEach(place => {
        promises.push(this.map.addMarker({
            title: place.name,
            animation: 'DROP',
            position: {
                lat: place.latitude,
                lng: place.longitude
            },
            icon: place.icon
        }));
    })

    try {
        const markers = await Promise.all(promises);
        markers.forEach((marker: Marker) => {
            this.subscriptions.add(
                marker.on(GoogleMapsEvent.MARKER_CLICK)
                    .subscribe(() => {
                        this.focus(marker);
                    })
            );
            this.markers.push(marker);
        })

    } catch (e) {
        this.auxiliarService.treatError(e);

    } finally {
        this.loadingMarkers = false;
    }
}

Current behavior:
Build works fine. When trying to load a map:
*** Terminating app due to uncaught exception 'GMSThreadException', reason: 'The API method must be called from the main thread'

Map loads fine without markers.

Android works without problems.

The same on 2.2.9.

places is a list of ~20 places.

Expected behavior:
Markers should load without problems.

Maybe something with WKWebView?

[battika]

Hello, just out of curiosity, why are your ionic-native plugin versions are different (4.5.2 vs 4.7.0)? Not sure if it has anything to do with your marker issue... On the other hand, are you actually waiting for the MAP_READY event before you start adding markers?

[allanpoppe]

@battika I've just updated my issue with the function that loads the map and calls loadMarkers.

4.7.0 was just to test if the problem was the version of ionic-native. The issue happens on 4.5.2 too.

[allanpoppe]

Well, it seens like it's a simulator issue. I just got the chance to test on a physical device and it's working well on it.

[battika]

Strange just tested it with IOS emulator and it works fine for me.

[wf9a5m75]

@allanpoppe Please share your project files that reproduce your issue 100% or frequently onto github

[wf9a5m75]

Since there is no response, I close this thread.

[kaoecoito]

Hi,

I'm having the same problem and running several tests I found that the problem only occurs when the icon can not be loaded.

In my test I use the following icon

icon: MarkerIcon = { url: 'assets/markers/pin_kdcare.png', size: { width: 24, height: 24 } }

Before the error mentioned above it informs the notfound message to
http://localhost/assets/markers/pin.png

Running the same code without adding a custom icon it runs without errors.

Changing the url of the icon to www/assets/markers/pin.png worked as well.

In this way what causes the error is not to find the image of the icon.

[GloomyStranger]

A big thanx to @kaoecoito , Changing the url of the icon to www/assets/markers/pin.png worked as well. helped