"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

Hey there! Are there any errors showing in Xcode’s dev tools? I’ll check with the team and see if there’s anything that stands out.

We did have a stream recently showing the plugin and the setup process, so I would check that out in the meantime

Try replacing your /node_modules/@capacitor/google-maps/ios/Plugins/Map.swift file with this one:

That solved my iOS issues for me.

Ref: Issues with compiling Capacitor Google Maps plugin in XCode

I have tried everyone of these examples and none of them work on the ios device. I’m out of ideas.

1 Like

Hello @mhartington,

No, I don’t see any error in the console of XCode. There is just a warning in the file /node_modules/@capacitor/google-maps/ios/Plugin/Map.swift:97 with this message : Conditional cast from 'UIView' to 'UIView' always succeeds.

Yes, I saw the stream video linked and tried to reproduce the result :slight_smile:

Hello @yellowkicks,

I just tried with this change but I don’t have any difference on my side. The map does not appears :confused:

In your home.module.ts did you declare the CUSTOM_ELEMENTS_SCHEMA?

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HomePageModule {}

Also, make sure your CSS is set up to display the map properly:

#container {
  width: 100%;
  height: 100%;
}

capacitor-google-maps {
  display: inline-block;
  height: 100%;
  width: 100%;
}

Can you share a sample app? It’s hard to debug without seeing some code.

Hello @yellowkicks & @mhartington,

Yes I have declared the CUSTOM_ELEMENTS_SCHEMA in the module file.

You can find here the basic reproduction of my code.
(You’ll just have to change the API key in the file home.page.ts:15 and build for the folder wwww, ios and android ).

Thanks again for your help :slight_smile:
Loïc

Hello @Loiic ,

we encountered the same issues you are having.

Our solution was that we declared the CUSTOM_ELEMENTS_SCHEMA not only in the module.ts file you are using the maps integration tags in, but also in the overall app.module.ts file.

Maybe this could also be a solution for your case.

Good Luck
Patrick

1 Like