0

I have an application made with Ionic 6, Angular 14 & Capacitor4. Only for certain devices, the background is shown black. Running the app with Android Studio I can see the background correctly but if I inspect the device with Chrome Developer Tools, I see it black.

[EDIT]: After investigation, the issue is caused by adding the capacitor-google-map component. I've tried to downgrade the capacitor-google-map version to 4.0.0 and to remove some of the atributes, but nothing has worked.

This is my config:

<div class="map">
  <capacitor-google-map #map *ngIf="hasMap"></capacitor-google-map>
</div>

Ts:

@ViewChild('map', { static: false }) mapRef?: 
ElementRef<HTMLElement>;

...

ngAfterViewInit() {
   let interval = setInterval(() => {
      if (this.mapRef?.nativeElement) {
        this.loadMap();
        clearInterval(interval);
      }
    }, 250);
}

async loadMap() {
  const center = {
    lat: this.portcall.Location.Latitude,
    lng: this.portcall.Location.Longitude,
  };

  this.googleMap = await GoogleMap.create({
    id: 'ps-map',
    element: this.mapRef.nativeElement,
    apiKey: environment.googleMapsApiKey,
    config: {
      center: center,
      zoom: 5,
      disableDefaultUI: true,
      styles: this.vesselService.getVesselMapsStyle(),
      tilt: 30,
    },
  });

  this.googleMap.addMarker({
    coordinate: center,
    title: this.portcall.Vessel.Name,
    iconUrl: this.getMapIcon(this.portcall.Location.Heading),
    iconSize: { width: 20, height: 34 },
  });
}

Can somebody assist?

enter image description here

Guillermo
  • 19
  • 5

1 Answers1

0

You have to provide more information related to the device that shows black but some phones force a dark background which can be fixed by adding the following lines to your theme.xml

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
     <item name="android:forceDarkAllowed" tools:targetApi="q">false</item>
</style>
Saad Waseem
  • 113
  • 1
  • 9