Error while initializing map on IOS device

[yiannis-spyridakis]

Bug Report

I am getting a crash while running ann app that uses @capacitor/google-maps on a test device (iPhone 8). The app crashes in Map.enableCurrentLocation and the error is:

Thread 1: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value

Which is caused by self.mapViewController.GMapView not being initialized.

Plugin(s)

@capacitor/google-maps

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 6.1.2
  @capacitor/core: 6.1.2
  @capacitor/android: 6.1.2
  @capacitor/ios: 6.1.2

Installed Dependencies:

  @capacitor/cli: 6.1.2
  @capacitor/core: 6.1.2
  @capacitor/android: 6.1.2
  @capacitor/ios: 6.1.2

[success] iOS looking great! 👌
[success] Android looking great! 👌

Platform(s)

IOS

Current Behavior

Crash on (I am guessing) certain device/ app setup combinations when loading map

Expected Behavior

Fix

Code Reproduction

I have debugged the plugin and the issue originates in Map.getTargetContainer

    private func getTargetContainer(refWidth: Double, refHeight: Double) -> UIView? {
        if let bridge = self.delegate.bridge {
            for item in bridge.webView!.getAllSubViews() {
                let isScrollView = item.isKind(of: NSClassFromString("WKChildScrollView")!) || item.isKind(of: NSClassFromString("WKScrollView")!)
                let isBridgeScrollView = item.isEqual(bridge.webView?.scrollView)

                if isScrollView && !isBridgeScrollView {
                    (item as? UIScrollView)?.isScrollEnabled = true

                    let height = Double((item as? UIScrollView)?.contentSize.height ?? 0)
                    let width = Double((item as? UIScrollView)?.contentSize.width ?? 0)
                    let actualHeight = round(height / 2)

                    let isWidthEqual = width == self.config.width
                    let isHeightEqual = actualHeight == self.config.height

                    if isWidthEqual && isHeightEqual && item.tag < self.targetViewController?.tag ?? Map.MAP_TAG {
                        return item
                    }
                }
            }
        }

        return nil
    }

In the function above isHeightEqual is always false. In the case of the 'correct' view it is off by one (367.0 <> 366.0) which, I am guessing has to do with the specific dimensions of my device and some rounding error.

This works for me:

                    let tolerance = 1.0
                    let isWidthEqual = abs(width - self.config.width) <= tolerance
                    let isHeightEqual = abs(actualHeight - self.config.height) <= tolerance

                    if isWidthEqual && isHeightEqual && item.tag < self.targetViewController?.tag ?? Map.MAP_TAG {
                        return item
                    }

[Geschan]

Experiencing the same issue on iPhone 13 Pro. GMapView is not being properly initialized and causing our app to crash if any setting like setMapType is called.

[Geschan]

On our test device, the issue went away when we set a fixed height (we had a variable height of 35vh) for the maps element. We will monitor our crash logs to see if that's true for all iPhone models that have been affected.

[christocracy]

@yiannis-spyridakis Are you getting this error when your iOS app is launched in the background?

You can simulate an app launching in the background by editing your Scheme like so:

I believe the error is caused because the GMSMapView instance is not created until the GMViewController viewDidLoad (ie: not until the app is brought to the foreground).

[luzader]

On our test device, the issue went away when we set a fixed height (we had a variable height of 35vh) for the maps element. We will monitor our crash logs to see if that's true for all iPhone models that have been affected.

I also encountered the same problem on iOS 16.7.6 on iPhone X, and based on this comment I changed my code to ensure that the capacitor-google-maps element always has an explicit width and height in pixels. That fixed it for me too.

[yiannis-spyridakis]

I can also confirm the issue goes away when explicit map width and height is used. Furthermore without explicit dimensions the fix I suggested leads to unstable map, especially on IOS.

We still needed the map to be responsive to our layout so we are kept the map element width and height to 100% and are hardcoding dimensions explicitly in code before initializing the map plugin:

private setExplicitMapDimensions() {
    if (this.mapElement?.nativeElement) {
        const computedStyle = getComputedStyle(this.mapElement.nativeElement);
        const computedHeight = computedStyle.height;
        const computedWidth = computedStyle.width;

        this.renderer.setStyle(
            this.mapElement.nativeElement,
            'height',
            computedHeight,
        );
        this.renderer.setStyle(
            this.mapElement.nativeElement,
            'width',
            computedWidth,
        );
    }
}