Google Map not showing on IOS if the html element has border

[sbdm05]

Bug Report

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

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

Installed Dependencies:

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

Platform(s)

IOS

Current Behavior

@ViewChild('citymap') mapRef!: ElementRef<HTMLElement>;
private newMap!: GoogleMap;

async createMap() {
  try {
    
    this.newMap = await GoogleMap.create({
      id: 'citymap',
      element: this.mapRef.nativeElement,
      apiKey: 'API_KEY',
      config: {
        center: {
          lat: 48.992128,
          lng: 2.2779189,
        },
        zoom: 12,
      },
    });

    console.log(this.mapRef.nativeElement); // not showing up at all on IOS
  } catch (error) {
    console.error('Error fetching or processing the map:', error); // error not explicit
 
  }

ngAfterViewInit() {

  this.platform.ready().then(() => {
    console.log('platform is ready');

    if (this.platform.is('ios')) {
      this.createMap();
    } else if (this.platform.is('android')) { 
      this.createMap();
    } else {
      console.log('inside else');
      this.createMap();
    }
  });
}

Expected Behavior

The map does show up in browser and Android, but not on IOS.
On the browser version, the console.log(this.mapRef.nativeElement) logs the DIV
<capacitor-google-map #citymap>// all the divs here are visible</capacitor-google-map>

On the IOS version, when inspecting with safari, the DIV in the DOM is empty

<capacitor-google-map _ngcontent-ng-c1814317578="" id="citymap" style="overflow: scroll; -webkit-overflow-scrolling: touch;">
<div style="height: 200%;"></div>
</capacitor-google-map>

Code Reproduction

Other Technical Details

npm --version output: 10.2.3

node --version output:v20.10.0

pod --version output (iOS issues only):1.14.3

Additional Context

I have installed a blank project also to isolate the issue, no luck there either.
I have deleted the ios folder, reinstall ios, no difference.
I have added transparency as it is sometimes a recommendation, but no change either.

Thank you very much for your help (it has been days)

[ionitron-bot]

This issue needs more information before it can be addressed. In particular, the reporter needs to provide a minimal sample app that demonstrates the issue. If no sample app is provided within 15 days, the issue will be closed.
Please see the Contributing Guide for how to create a Sample App.
Thanks! Ionitron 💙

[sbdm05]

ok, here is a github link that demonstrates that the map does not show up.
https://github.com/sbdm05/demo-map-ios-issue

this.newMap = await GoogleMap.create({
      id: 'my-map',
      element: this.mapRef.nativeElement,
      apiKey: 'API_KEY',
      config: {
        center: {
          lat: 48.992128,
          lng: 2.2779189,
        },
        zoom: 12,
      },
    });
    console.log(this.newMap, 'newMap');

this is the console.log of the newMap
{"element":{"__ngContext__":4},"resizeObserver":{},"id":"my-map"}

It seems that the map is created but the component is not updated, even when using ngAfterViewInit() to create the map.

It works fine on browser though.

Is there another setup in xcode i should do ?

Best

[sbdm05]

this is the code. There is nothing inside capacitor-google-map, whereas in the browser, capacitor-google-map is populated with multiple divs.

[ionitron-bot]

This issue has been labeled as type: bug. This label is added to issues that that have been reproduced and are being tracked in our internal issue tracker.

[jcesarmobile]

The problem is the border, the plugin looks for native views to append the map on them based on the html element size, but since you have added a border the sizes don't match.
We should calculate the html map size including borders, padding, etc. but in the meantime you can remove the border and it should work.