While I was working on implementing the marker cluster function, I encountered an error stating that cordova-plugin-googlemaps is not ready. The error message advised me to use platform.ready() before executing any methods. However, even after importing the platform statement, the issue persisted and the marker cluster was not displaying on the map. I am unsure of what exactly the error is pointing towards. If anyone has insight into this problem, please help. Thank you!

import { Component } from '@angular/core';
import { MarkersService } from '../services/markers.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ViewChild, ElementRef } from '@angular/core';

import { Plugins } from '@capacitor/core';
import { AngularFireAuth } from "@angular/fire/auth";
import { Observable } from 'rxjs';
import { AngularFirestoreCollection, AngularFirestore } from '@angular/fire/firestore';
import { map } from 'rxjs/operators';
import { MarkerCluster, GoogleMapsEvent, Marker } from '@ionic-native/google-maps';
import { marker } from 'leaflet';
import { Platform } from '@ionic/angular';
import { database } from 'firebase';
import { GoogleMapsService } from '../services/backup/google-maps.service';

const { Geolocation } = Plugins;

declare var google: any;

@Component({
  selector: 'app-marker-map',
  templateUrl: './marker-map.page.html',
  styleUrls: ['./marker-map.page.scss'],
})
export class MarkerMapPage {

  @ViewChild('map', { read: ElementRef, static: false }) mapElement: ElementRef;
  infoWindows: any = [];
  map: any;
  markers: any = [];
  markerCluster: any;
  data: any;
  arr: any;

  locations: Observable<any>;
  locationsCollection: AngularFirestoreCollection<any>;
  user = null;
  watch = null;

  isTracking = false;
  mapCluster: any;

  constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore, public platform: Platform, public googleMapsService: GoogleMapsService) {
  }

  anonLogin() {
    this.afAuth.signInAnonymously().then(res => {
      this.user = res.user;
      console.log(this.user);

      this.locationsCollection = this.afs.collection(
        `locations/${this.user.uid}/track`,
        ref => ref.orderBy('timestamp')
      );

      //load firebase data 
      this.locations = this.locationsCollection.valueChanges();
      //update map 
      this.locations.subscribe(locations => {
        console.log('new locations: ', locations);
        this.addMarker(locations);
      }); 
    });
  }

  ionViewWillEnter() {
    this.showMap();
  }

  showMap() {
    let latLng = new google.maps.LatLng(1.2902706, 103.851959);

    let mapOptions = {
      center: latLng,
      zoom: 11,
      disabledDefaultUI: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    this.map.init().then((map) => {
      this.mapCluster.addCluster(map);
    });
  }

  addMarker(locations) {
    for (let loc of locations) {
      let latLng = new google.maps.LatLng(loc.lat, loc.lng);
      let marker = new google.maps.Marker({
        position: latLng,
        timestamp: loc.timestamp,
        latitude: loc.lat,
        longitude: loc.lng
      });
      marker.setMap(this.map);
      this.addInfoWindowToMarker(marker);
    }
  }

  addInfoWindowToMarker(loc) {
    let infoWindowContent = '<div id="content">' +
      //'<h2 id="firstHeading" class="firstHeading">' + loc.timestamp + '<h2>' +
      '<p>No. of fever cases: ' + loc.timestamp + '<p>' +
      //'<p>Longitude: ' + loc.longitude + '<p>' + 
      '</div>';
    let infoWindow = new google.maps.InfoWindow({
      content: infoWindowContent
    });

    loc.addListener('click', () => {
      this.closeAllInfoWindows();
      infoWindow.open(this.map, loc);
    });
    this.infoWindows.push(infoWindow);
  }

  closeAllInfoWindows() {
    for (let window of this.infoWindows) {
      window.close();
    }
  }

  startTracking() {
    this.isTracking = true;
    this.watch = Geolocation.watchPosition({}, (position, err) => {
      console.log('new position: ', position);
      if (position) {
        this.addNewLocation(
          position.coords.latitude,
          position.coords.longitude,
          position.timestamp,
        );
      }
    });
  }

  stopTracking() {
    Geolocation.clearWatch({ id: this.watch }).then(() => {
      this.isTracking = false;
    });
  }

  addNewLocation(lat, lng, timestamp) {
    this.locationsCollection.add({
      lat,
      lng,
      timestamp
    });

    let position = new google.maps.LatLng(lat, lng);
    this.map.setCenter(position);
    this.map.setZoom(9);
  }

  ngOnInit() {
    this.platform.ready().then(() => {
      this.anonLogin();
      this.showMap();
    })
  }
}

google-maps.service.ts

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
//import { ConnectivityService } from './connectivity.service';
import { Geolocation } from 'ionic-native';
import { MarkerCluster, Marker } from '@ionic-native/google-maps';

@Injectable({
  providedIn: 'root'
})
export class GoogleMapsService {

  markerCluster: any;
  locations: any;

  constructor(public mapCluster: MarkerCluster) {

  }

  addCluster(map) {

    if (google.maps) {

      //Convert locations into array of markers
      let markers = this.locations.map((location) => {
        return new google.maps.Marker({
          position: location,
          label: "Hello!"
        });
      });

      this.markerCluster = new MarkerCluster(map, markers);

    } else {
      console.warn('Google maps needs to be loaded before adding a cluster');
    }

  }
}