Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value - iOS physical device

[StuBedore]

Describe the bug 2022-10-29 02:40:43.757884-0500 App[37830:14397358] CapacitorGoogleMaps/Map.swift:121: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value

Running on physical iOS 15 device.

Also, when I remove the style, the error/crash goes away but the map is blank, but works on web. The google maps element is not created on iOS, the apacitor-google-map element in the dom is empty, where as on web it is properly populated with the google maps elements.

To Reproduce Steps to reproduce the behavior:

1. Add Google Maps plugin
2. Set map styles in the configuration GoogleMapConfig
3. Create the map
4. Build and run on physical iOS device

Expected behavior App shouldn't crash and map should work.

Screenshots

[StuBedore]

I'm dumb, issue was the height/width didn't match the scrollview so target was never set, and gmapview never loaded.

[jeroen-mulder]

@StuBedore Could you elaborate on how you fixed this exactly? I'm having the same error, but can't find the fix.

[varCloud]

@StuBedore Could you elaborate on how you fixed this exactly? I'm having the same error, but can't find the fix.

[StuBedore]

@jeroen-mulder @varCloud In the docs https://capacitorjs.com/docs/apis/google-maps

The Google Map element itself comes unstyled, so you should style it to fit within the layout of your page structure. Because we're rendering a view into this slot, by itself the element has no width or height, so be sure to set those explicitly.

Style:

capacitor-google-map { display: inline-block; width: 275px; height: 400px; }

Typescript: ` div className="component-wrapper"> <capacitor-google-map ref={mapRef} style={{ display: 'inline-block', width: 275, height: 400 }}>

  <button onClick={createMap}>Create Map</button>

[JEricaM]

@jeroen-mulder @varCloud In the docs https://capacitorjs.com/docs/apis/google-maps

The Google Map element itself comes unstyled, so you should style it to fit within the layout of your page structure. Because we're rendering a view into this slot, by itself the element has no width or height, so be sure to set those explicitly.

Style:

capacitor-google-map { display: inline-block; width: 275px; height: 400px; }

Typescript: ` div className="component-wrapper"> <capacitor-google-map ref={mapRef} style={{ display: 'inline-block', width: 275, height: 400 }}>

  <button onClick={createMap}>Create Map</button>

` Notice the height/width match. That was my issue.

I've the same problem but I don't understand your solution. Which style you choosed? the one in ts or the one in the scss?

in my case I have in my scss

capacitor-google-map {
        display: inline-block;
        width: 100%;
        height: 90%;
    }

and in my typescript page

<capacitor-google-map id="map"></capacitor-google-map>

I don't have a mismatch of the style but I still have the error :(

[michaelschoenbaechler]

Is there any update? I have the same problem.

It works when I set a fixed height, but I don't want to do this.

<capacitor-google-map #mapRef></capacitor-google-map>

// from this
capacitor-google-map {
  ....
  height: 95vh;
}

// to this
capacitor-google-map {
  ....
  height: 500px;
}

[michaelschoenbaechler]

it works with height: 100vh;. Which is fine in my case.