"capacitor/google-maps" doesn't appear on mobile devices

Hello,
I’m trying to test the new Capacitor plugin : “@capacitor/google-maps”.
I followed the instructions here to configure the tool.

Everything works fine in the browser but in native app, it doesn’t.
In fact, in IOS, nothing is shown but in Android, the map is showing a short time and then it disappears.

I tried with a new blank project and this is the result of the command ionic info:

Ionic:

   Ionic CLI                     : 6.18.1 (/Users/myusername/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.1.5
   @angular-devkit/build-angular : 13.2.6
   @angular-devkit/schematics    : 13.2.6
   @angular/cli                  : 13.2.6
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

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

Utility:

   cordova-res : 0.15.4
   native-run  : 1.5.0

System:

   NodeJS : v14.15.0 (/Users/myusername/.nvm/versions/node/v14.15.0/bin/node)
   npm    : 6.14.8
   OS     : macOS Monterey

Here is the HTML I used:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Test GMaps Capacitor
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
	<div id="container">
  		<capacitor-google-maps #mapRef></capacitor-google-maps>
	</div>
</ion-content>

Here is the typeScript code:

import { Component, ElementRef, ViewChild } from '@angular/core';
import { GoogleMap } from '@capacitor/google-maps';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

	map: GoogleMap;
	mapRefEl = null;

	@ViewChild('mapRef')
	set mapRef(ref: ElementRef<HTMLElement>) {
		this.mapRefEl = ref.nativeElement;
	}

  	constructor() {}

	ngAfterViewInit() {
		this.createMap(this.mapRefEl);
	}

	async createMap(ref: HTMLElement) {
		this.map = await GoogleMap.create({
			id: 'map-test',
			element: ref,
			apiKey: 'MY-API-KEY',
			config: {
				center: {
					lat: 33.6,
					lng: -117.9
				},
				zoom: 8,
			},
			forceCreate: true,
		});
	}

}

Does anyone have a solution or explanation for this problem?

Thanks and have a nice day,
Loïc

1 Like