I am trying to display a map in my Ionic 5 app, but I’m getting this error in the console:
ERROR TypeError: Cannot read property ‘ROADMAP’ of undefined
at HomePage.loadMap
The error is in relation to
mapTypeId: google.maps.mapTypeId.ROADMAP
in the below typescript:
export class HomePage {
locations: Observable<any>;
locationsCollection: AngularFirestoreCollection<any>;
user = null;
@ViewChild('map', { static: false }) mapElement: ElementRef;
map: any;
markers = [];
constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore) {
this.anonLogin();
ionViewWillEnter() {
this.loadMap();
loadMap() {
let latLng = new google.maps.LatLng(51.9036442, 7.6673267);
let mapOptions = {
center: latLng,
zoom: 5,
mapTypeId: google.maps.mapTypeId.ROADMAP
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
anonLogin() {
this.afAuth.auth.signInAnonymously().then(user => {
console.log(user);
this.user = user;
this.locationsCollection = this.afs.collection(
`locations/${this.user.uid}/tracks`,
ref => ref.orderBy('timestamp')
// update map
Can someone please tell me how I can resolve this issue?
so you can add some checks and see if “google” is accessible within your class (most likely not and hence why you have this issue).
Right after your import statements try adding:
declare var google:any;
Then see if it works. If not - share how exactly you are importing google maps library