Everything works fine when I’m using on ionic serve but after all the development it’s time for test it on a real Android device, then after a successfully build and navigate to the page where the map is, when I call the GoogleMap.create function, the app just crashes and close, above a example video of what happens.
Here’s the HTML and TS code:
HTML
<div id="mapa" [ngClass]="mostrarMapa ? 'showMap' : 'hiddenMap'">
<p class="text-center">Indique no mapa onde viu o desaparecido pela ultima vez</p>
<capacitor-google-maps #mapRef></capacitor-google-maps>
<ion-grid>
<ion-row>
<ion-col size="5" offset="1">
<ion-button expand="full" color="danger" (click)="adicionarMarcador()">Adicionar Marcador</ion-button>
</ion-col>
<ion-col size="5">
<ion-button expand="full" color="tertiary" (click)="localizacaoAtual()">Localização Atual</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<ion-row>
<ion-col size="10" offset="1">
<ion-button expand="full" color="success" (click)="adicionarLocalizacaoComentario()">Adicionar ao Comentário</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<ion-row>
<ion-col size="10" offset="1">
<ion-button expand="full" fill="clear" (click)="fecharMapa()">Fechar Mapa</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</div>
MODULE
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { TemplateDesaparecidoComponent } from "./template-desaparecido/template-desaparecido.component";
@NgModule({
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],
imports: [
CommonModule,
IonicModule,
FormsModule,
RouterModule
],
declarations: [TemplateDesaparecidoComponent],
exports: [TemplateDesaparecidoComponent]
})
export class ComponentsModule{}
TS
export class TemplateDesaparecidoComponent implements OnInit {
@Input() resultados: any;
@Input() pagina: string;
public atual;
public usuario: Usuario = new Usuario();
public texto_comentario = "Eu vi esse cara recentemente no";
public temResultado = false;
private loadingvar;
public mostrarMapa: Boolean = false;
private map: GoogleMap = {} as GoogleMap;
private mapRefEl = null;
private center: any = {
lat: -23.53,
lng: -46.62
};
private markerId = null;
@ViewChild('mapRef')
set mapRef(ref: ElementRef<HTMLElement>) {
this.mapRefEl = ref.nativeElement;
}
...
async carregarMapa(){
try {
let localizacaoAtual = await Geolocation.getCurrentPosition({
enableHighAccuracy: true,
});
this.center.lat = localizacaoAtual.coords.latitude;
this.center.lng = localizacaoAtual.coords.longitude;
} catch (error) {
if(error.message !== undefined){
console.warn("Erro ao pegar localização atual: " + error.message);
}
}
this.map = await GoogleMap.create({
id: 'map-test',
element: this.mapRefEl,
apiKey: 'HERE IS MY GOOGLE MAPS CODE YOU KNOW',
config: {
zoom: 15,
center: this.center
}
});