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? **
- Installing the required packages:
npm install @capacitor/google-maps
npx cap sync
- 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>
- 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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.