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

Capacitor
1

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
2

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

3

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

4

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

2 Likes
5

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:

6

Hello @yellowkicks,

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

7

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%;
}
8

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

9

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

10

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
11

This thing works for me
`<ion-content [fullscreen]=“true”>

` `#container { width: 100%; height: 100%; // background-color: white; }

capacitor-google-map {
display: inline-block;
height: 100%;
width: 100%;
border: red solid 1px;
}

ion-content {
–background: none
}
`

ngAfterViewInit() { setTimeout(async () => { await this.initMap(); }, 700); }
async initMap() { this.newMap = await GoogleMap.create({ id: 'my-map', // Unique identifier for this map instance element: this.mapRef.nativeElement, // reference to the capacitor-google-map element apiKey: this.apiKey, // Your Google Maps API Key forceCreate: true, config: { center: { // The initial position to be rendered by the map lat: this.myPosition?.latitude || 32.465058999999997, lng: this.myPosition?.longitude || 74.21373, }, zoom: 16, // The initial zoom level to be rendered by the map }, }, (data: MapReadyCallbackData) => { // console.log(Map initialized ${data.mapId}); }); setTimeout(async () => { // this.newMap.setMapType('Satellite' as any); // await this.newMap.enableTrafficLayer(true) }, 2000); // Add a marker to the map // this.newMap.disableClustering(); }

12

Hi Patrick & Premier-Solution,

Sorry for my late reply!

I have found the way to solve this by testing several things.
(by adding the CUSTOM_ELEMENTS_SCHEMA and by adding a delay after init the map).
(I close this ticket so)

However, after testing this tool, I was missing some features such as the ability to draw custom elements on the map (ex: a line between the user position and a specific marquer). I finally switch to another tool: Mapbox.

Thanks for your help :slight_smile:,
Loïc

13

I had the same issue, so I switched to the component made by Angular team. components/src/google-maps at main · angular/components · GitHub