Ionic Map Issue on geolocation

Question

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.

Answer 1

I think error occurs because of ionViewWillEnter(), I am not sure why but I've done some changes and it worked, here is my code

  async ngAfterViewInit() {
    await this.createMap();
    await this.getCurrentLocation();
    console.log("deneme")
    this.map.setCamera({
      coordinate: {
        lat: this.lat,
        lng: this.lng,
      },
      zoom:16
    });
    this.addPolygonsToMap();
    this.addStations();
    this.show_scooters();
  }

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

In the createMap() function, I've assigned random lat and lng to create map.

  async createMap() {
    this.map = await GoogleMap.create({
      id: "scooter-map",
      apiKey: environment.mapsKey,
      config: {
        center: {
          lat: 29,
          lng: 29,
        },
        zoom: 3,
      },
      element: this.mapRef.nativeElement,
      forceCreate: true,
    });

    this.mapReady = true;
  }