Google Maps Capacitor not working on iOS

Ionic Framework Ionic Angular
1

Hello,
I have an issue concerning the Google Maps Plugin (@capacitor/google-maps) and iOS. I followed the instructions in the Announcement.

Namely:

  1. Installed the required packages:
npm install @capacitor/google-maps
npx cap sync
  1. Updated the Info.plist file (/Users//project/ios/App/App/Info.plist). Set the following parameters:
<key>NSLocationAlwaysUsageDescription</key>
<string>Privacy We need your Location Always</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Privacy We need your Location when App is in usage</string>
  1. Updated the Angular project and added a component
map.component.html:
<capacitor-google-maps #map></capacitor-google-maps>
<ion-button (click)="createMap()">Create Map</ion-button> 

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
  @ViewChild('map')
  mapRef: ElementRef<HTMLElement>;
  newMap: GoogleMap;


  constructor() {
  }

  ngOnInit() { }

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

}


map.component.scss:
capacitor-google-maps {
  display: inline-block;
  width: 275px;
  height: 400px;
  border: 3px solid red; 
}

Ionic-Version 6.19.1

When I start my application with the command Ionic capacitor run ios -l —external the simulator starts. Further, in my web-browser the map opens up if I press the button. But in my iOS-Environment it does not work. When I press the button, nothing happens and the map is not shown. Any suggestions? Thank you in advance!

2

Is your Apple running a M1 chip?

The Google Maps SDK currently does not support running on simulators using the new M1-based Macbooks. This is a known and acknowledged issue and requires a fix from Google. If you are developing on a M1 Macbook, building and running on physical devices is still supported and is the recommended approach.

ref: Google Maps Capacitor Plugin API | Capacitor Documentation

3

Yes, here some information on my notebook:
MacBook Air M1 2020
macOS Monterey Version 12.4

I will check whether it works on a non M1-MacBook. Thank you and I will let you know when I got more information.

4

Okay here we go. I used my iPhone to launch the app on it and it still does not work. In my XCode output it says:
:zap: To Native → CapacitorGoogleMaps create 8589184
:zap: TO JS undefined
when i click the button.
Does that output help me in any way? :smiley:

5

The exact same thing is happening to me as well. I can see the map in the browser. I also get the same XCode output: TO JS undefined. I’ve enabled billing and enabled the javascript sdk and maps sdk for ios.
Im running it on my phone and my mac is one with Intel chip. Any help would be appreciated.

6

Same thing happening for me - has anyone found out why? I really want to start using it in our app :slight_smile:

7

My colleague finally found the issue. When you use the plugin you need to import the CUSTOM_ELEMENTS_SCHEMA in every @NgModule-Schema that you use. See example below:
In my case I had to import it in my tab-map.module.ts and in my app.module.ts.

tab-map.module.ts

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabMapPage } from './tab-map.page';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { TabMapPageRoutingModule } from './tab-map-routing.module';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabMapPageRoutingModule
  ],
  declarations: [TabMapPage],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TabMapPageModule {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';


@NgModule({
  declarations: [
    AppComponent,
  ],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

Hope this helps!

8

I’m facing exactly the same problem. Importing CUSTOM_ELEMENTS_SCHEMA did not solve the problem for me. Did you change anything else besides the import?

9

Same here, I’ve tried [CUSTOM_ELEMENTS_SCHEMA] and still getting:
:zap: To Native → CapacitorGoogleMaps create xxx
:zap: TO JS undefined

10

IMO it’s cool that ionic finally created a plugin for google maps but it seems it’s effort is kind of late. And they are still implementing other most common maps features, which most of us cannot wait for.

So I found the capacitor google map plugin is not as easy to set up as is the official angular google maps component. This map component works well with native and web, does not need extra packages and works out the box.

1 Like
12

Has anyone had any success with this issue - I’m stuck; I cannot get the map to appear in iOS device or simulator, but working properly in web. Haven’t tried Android. I get the same XCode output: “TO JS undefined”. I’ve added CUSTOM_ELEMENTS_SCHEMA in every module.

13

For iOS, I was finally able to get the map displaying in simulator and on device by removing

[fullscreen]="true"

from the <ion-content> tag in the home.page.html file hosting the map.

14

Google has now resolved the M1 issue. Hopefully we get an update to this plugin ASAP.

15

@nodiced922 did you found any solution still ?

Created this issue on github: Bug with build on Mac M1 · Issue #223 · capacitor-community/google-maps · GitHub