Map not displayed on iOS

[MatteoOstermeier]

Bug Report

Hello all! Unfortunately, I need your help. I've tried following some tipps in other threads, but none of them worked. Thanks a lot in advance!

Plugin(s)

@capacitor/google-maps

Capacitor Version

💊 Capacitor Doctor 💊

Latest Dependencies:

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

Installed Dependencies:

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

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

Platform(s)

iOS

Current Behavior

I have set up this plugin on my ionic capacitor application. it is displayed inside a modal. The implementation for Android and Web is working like a charm.

On iOS, i cannot get it to run properly. The map is not displayed. I tried inspecting the code on safari and the maps element just seems to be empty. The map view is in the foreground, as I could manually set a style:background-color:red and see it. Strange thing is that if i close the modal (and the map.destroy() function is called), the map is shown for a tiny fraction.

I'm getting the following error when the map is created:
⚡️ [log] - center is 50.3142482
⚡️ [log] - {"lat":50.3142482,"lng":10.8559456}
⚡️ To Native -> CapacitorGoogleMaps create 88537378
⚡️ TO JS undefined
2023-01-21 22:05:18.936369+0100 App[510:19026] Metal GPU Frame Capture Enabled
2023-01-21 22:05:18.954945+0100 App[510:19026] Metal API Validation Enabled
⚡️ To Native -> CapacitorGoogleMaps addListener 88537379

On Web:

On Android:

On iOS:

I've tried a couple of workarounds (like removing fullscreen=true) or creating the map after a timeout. I also tried setting all backgrounds to transparent like on android, but that only makes the background turn grey. I also tried creating the map on a button click just in case it is rendered too early, but that also did not change anything.

Expected Behavior

The map shall be displayed like on the other platforms

Code Reproduction

I'm using a tabs layout. A page is opening up a modal for creating content. This page is opening the modal with the map. Both modal components are declared in a shared components module:

Here is the code opening the Map Modal. (layout.setScanner() was a method I used for setting all backgrounds to transparent. I initially used it for a qr-code scanner, which is also rendered in the background. so sorry for the name).

This is the code of the map component:

HTML:

Other Technical Details

Ionic CLI : 6.20.8 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.5.0
@angular-devkit/build-angular : 15.1.2
@angular-devkit/schematics : 15.1.2
@angular/cli : 15.1.2
@ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : 4.6.2
@capacitor/android : 4.6.2
@capacitor/core : 4.6.2
@capacitor/ios : 4.6.2

Utility:

cordova-res : 0.15.4
native-run : 1.7.1

System:

NodeJS : v16.17.0 (/usr/local/bin/node)
npm : 9.3.1
OS : macOS Monterey

[Ionitron]

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks!
Ionitron 💙

[DwieDima]

can you try to remove the div where the map is wrapped and apply this styling to your map?

capacitor-google-map {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}

here's a snippet which is working for me:

public async initialize(element: HTMLElement) {
    const apiKey = environment.googleMapKey;
    const options: CreateMapArgs = {
      id: element.id,
      element,
      apiKey,
      forceCreate: true,
      config: {
        tilt: 0,
        disableDefaultUI: true,
        zoom: 18,
        center: {
          lat: 47.58491,
          lng: 9.70563
        }
      }
    };

    this.mapRef = await GoogleMap.create(options);
    const granted = await this.requestPermission();

    if (granted) {
      await this.mapRef.enableCurrentLocation(true);
    }
  }

  public async requestPermission(): Promise<boolean> {
    const permissionToRequest: GeolocationPluginPermissions = {
      permissions: ['location', 'coarseLocation']
    };
    await Geolocation.requestPermissions(permissionToRequest);
    const permissions = await Geolocation.checkPermissions();
    return permissions.location.length > 0;
  }

[DwieDima]

Hi @MatteoOstermeier, now i see you're using the map inside ion-modal.
In this case you have to make sure on your side, that all elements behind ion-modal are transparent.
In your case the ion-content element of the parent page where the modal is created, need also to be transparent.

For ion-modal you have to also make the modal transparent (not only ion-content)

ion-modal {
  &.transparent-modal {
    --background: transparent;

    ion-content {
      --background: transparent;
    }
  }
}

apply transparent-modal class to your ion-modal as cssClass property while creating it.

This is not a bug of the plugin. You can read more about this here:

https://github.com/ionic-team/capacitor-plugins/tree/main/google-maps#usage
https://github.com/mapsplugin/cordova-plugin-googlemaps#how-does-this-plugin-work-android-ios
https://capacitor-community.github.io/google-maps/#/guide/setup-webview

[bahyusanciko]

In this case you have to make sure on your side, that all elements behind ion-modal are transparent.

not working , its blank on native apps, browser its working

[MatteoOstermeier]

Hey all! Thanks a lot for your support. I'm getting to the root of the problem (I think).

Setting background to transparent also helps on iOS. I first thought this was only necessary for Android. Still, that is not the only solution required, as this shows only a grey background.

The map is displayed if i use a setTimeOut of 0 (!) seconds before triggering the createMap() in ionViewDidEnter(). Sounds pretty weird to me. I can personally work with this workaround, but let me know if you have an idea where the bug might be rooted. The only error i get in the js console is "failed to load resource core.css.map" in both the working and not working case.

[DwieDima]

Hi @MatteoOstermeier
to find the missing layer which is not transparent i recommend you to inspect your device on safari by changing background transparency.
For me it looks like this might be the <body> background.

[jcesarmobile]

closing since no sample app was provided
it sounds like a duplicate of #1366