Ionic Google Maps not showing for iOS-Devices with Angular

Issue

I am currently working on an Ionic-Project where I want to include Google Maps in my application. Therefore, I consulted the official capacitor Google Maps plugin. I got it working on the web, but on an iOS-Device my map is not showing.

** What did I do? **

1. Installing the required packages:

npm install @capacitor/google-maps
npx cap sync

2. 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>

3. 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> 

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

map.component.ts:
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { GoogleMap } from '@capacitor/google-maps';

@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: key,
      config: {
        center: {
          lat: 33.6,
          lng: -117.9,
        },
        zoom: 8,
      },
    });
  }

}

** Version **

• Ionic 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. Any suggestions? Thank you in advance!

EDIT: I have read that the Google Maps SDK is not supported on my M1 MacBook. Therefore, I installed the app on my local iPhone, but unfortunately this did not solve my issue.

Solution

I finally found the answer to my 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!

Answered By - Lars