Capacitor Google Map not showing on android

Ionic Framework Ionic Angular
1

I installed and am using the official capacitor google maps package (@capacitor/google-maps), it is working perfectly fine on the web view. However, when I run it on an android device the map does not show. I have added the required google API’s (Maps JavaScript API & Maps SDK for Android) but the map is still not showing.

Below is my code:

html

<capacitor-google-map #map></capacitor-google-map>
<button (click)="createMap()">Create Map</button>

ts:

@ViewChild('map') mapRef: ElementRef<HTMLElement>;
  newMap: GoogleMap;

  async createMap() {
    this.newMap = await GoogleMap.create({
      id: 'my-cool-map',
      element: this.mapRef.nativeElement,
      apiKey: environment.apiKey,
      config: {
        center: {
          lat: 33.6,
          lng: -117.9,
        },
        zoom: 8,
      },
    });
  }

Update:
I am currently running the app on live reload on an android device and I am noticing something very weird. Every time I do a change in the code and the app reloads, a white screen with the map on it show, and when the app fully reloads it disappears.

2

You have to edit your app css to make elements transparent

On Android, the map is rendered beneath the entire webview, and uses this component to manage its positioning during scrolling events. This means that as the developer, you must ensure that the webview is transparent all the way through the layers to the very bottom. In a typically Ionic application, that means setting transparency on elements such as IonContent and the root HTML tag to ensure that it can be seen. If you can’t see your map on Android, this should be the first thing you check

I think these two elements should be enough

ion-content {
  --background: transparent;
}

body {
  background: transparent;
}
1 Like
3

Thank you a lot for your help, saved me twice. But this plugin still has a long way to go, so I am now using @angular/google-maps instead.

1 Like
4

@osamaelmasri did you have a problem using angular/google-maps in capacitor??

in my app, the map doesnt show either with capacitor plugin

5

I had same issues while trying to use the Google Map with ionic React, Instead I used the JavaScript map API and it worked just fine, added Polyline, markers and some click events. There’s has to be some internal issues with the Capacitor 5 Google maps packages.

6

“I spent two days on this problem and finally found the solution. If your project is based on Angular and Ionic, my solution is to place the style inside ::ng-deep .”