How to resolve "Cannot read property 'ROADMAP' of undefined" when implementing google maps?

Ionic Framework
1

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?

2

Not an Answer, just a Question. Are you developing a PWA or native App? If an App: Why don’t you use a Plugin to use the native Google Maps SDK’s, as they act way more better, are offline able, etc. on Mobile Devices as the Javascript Version.

3

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