whitescreen creating map

Describe the bug

!! This issue is related to the latest build v2.0.0-alpha.6 from the fork of @tafelnl !!

when you create the map, it is not initialized, although this was successful in the logs (see safari screenshot). The Maps API key is valid.

To Reproduce Install latest version: npm i git+https://github.com/DutchConcepts/capacitor-google-maps.git#v2.0.0-alpha.6

Code to initialize:

ngOnInit() {
    setTimeout(() => {
      this.initMap();
    }, 5000);
  }

  public async initMap() {
    await CapacitorGoogleMaps.initialize({
      key: 'MAPS_API_KEY',
      devicePixelRatio: window.devicePixelRatio, // this line is very important
    });

    const element = document.getElementById('container');
    const boundingRect = element.getBoundingClientRect();
    try {
      //@ts-ignore
      const result = await CapacitorGoogleMaps.createMap({
        boundingRect: {
          width: Math.round(boundingRect.width),
          height: Math.round(boundingRect.height),
          x: Math.round(boundingRect.x),
          y: Math.round(boundingRect.y),
        },
      });

      // remove background, so map can be seen
      element.style.background = 'transparent';

      // finally set `data-maps-id` attribute for delegating touch events
      element.setAttribute('data-maps-id', result.googleMap.mapId);

      console.log('success');
    } catch (e) {
      console.log('error', e);
    }
  }

Screenshots

logs inside safari:

logs inside xcode:

result:

Additional context

• iPhone 11 Pro IOS 15.2
• XCode Version 13.2.1
• MacBook Pro M1 Monterey 12.1
• Ionic Angular

[va2ron1]

@DwieDima set this in the folder.page.scss, is a workaround to solved your problem.

ion-content {
  --background: transparent;
}

@tafelnl this branch need a lot more work, I uploaded my changes that I did in the main repo so you can take it as a reference to make the fixes. https://github.com/va2ron1/capacitor-googlemaps-native

[DwieDima]

@va2ron1 thank you, your snippet fixed it! @tafelnl now i found another issue: #132