I've been struggling to integrate Google Maps into my web application. Unfortunately, all I see is a blank screen with no errors. Here's the current code snippet that I have. It seems like there might be an issue with the mapElement variable, but my TypeScript skills are lacking and none of the online solutions seem to work for me.
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-google-maps',
templateUrl: './google-maps.component.html',
styleUrls: ['./google-maps.component.scss'],
})
export class GoogleMapsComponent implements OnInit {
@ViewChild('map', { static: false }) mapElement: ElementRef;
text: string;
map: any;
constructor() {
this.text = "hello World"
}
initMap() {
let coords = new google.maps.LatLng(45, 100);
let mapOptions: google.maps.MapOptions = {
center: coords,
zoom: 20,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}
ngAfterContentInit() {
this.initMap();
}
ngOnInit() {
}
}
When trying to use the component in events.html:
<ion-header>
<ion-toolbar color = "primary">
<ion-title>Events</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<app-google-maps></app-google-maps>
</ion-content>
I would really appreciate any assistance with this issue!