Ionic map only displays app started

first of all I searched this error and couldn’t find updated solutions. All of the solutions are old and doesn’t work for me. So my error started with user’s current location. I have an app which uses google map capacitor. When my app created I can see the map and nearby stations, I can navigate through my app in the menu bar, everything works fine but then when I add the user’s location my app doesn’t display map on the second time. It works perfect on the browser but not in the IOS device. Here is my lifecycle and necessary codes.

export class HomePage {
  @ViewChild('map') mapRef: ElementRef<HTMLDivElement>;
  map: GoogleMap;
  mapReady = false;

  la: string;
  lo: string;
  lng: number;
  lat: number;

  ngAfterViewInit() {
    this.createMap();
    console.log('map is created!!!');
    this.mapReady = true;
  }

  ngOnDestroy() {
    this.destroyMap();
    this.mapReady = false;
  }

  ionViewWillEnter() {
    if (!this.mapReady) {
      console.log('map is creating for the second');
      this.createMap();
      this.mapReady = true;
    }
  }
  async createMap() {
    await this.getCurrentLocation();
    this.map = await GoogleMap.create({
      id: Math.random.toString(),
      apiKey: environment.mapsKey,
      config: {
        center: {
          lat: this.lat,
          lng: this.lng,
        },
        zoom: 16,
      },
      element: this.mapRef.nativeElement,
      forceCreate: true,
    });
    this.addPolygonsToMap();
    this.addStations();
    this.show_scooters();
  }
    destroyMap() {
    try {
      this.map.destroy().then(() => console.log('Map destroyed'));
    } catch (error) {
      console.error('Error destroying the map:', error);
    }
  }
  async getCurrentLocation() {
    try {
      const location = await Geolocation.getCurrentPosition();
      this.lat = location.coords.latitude;
      this.lng = location.coords.longitude;
      this.la = location.coords.latitude.toString();
      this.lo = location.coords.longitude.toString();
    } catch (error) {
      console.error('Error getting current location:', error);
    }
  }

I think the error occurs because of my lifecycle hooks, but I couldn’t fix it. I am new at mobile app development and ionic-angular hope you guys can help me.

I create a new component which doesn’t have any location requests it worked. Then I changed it’s

  ngAfterViewInit() {
    this.createMap();
    console.log('map is created!!!');
    this.mapReady = true;
  }

to

  ngAfterViewInit() {
    this.createMap().then(
      () => (console.log('map is created!!!'), (this.mapReady = true))
    );
  }

it didn’t work. As I mentioned early I guess my lifecycle is wrong.