Capacitor google maps plugin not showing map in iphone simulator using Macbook m1

[Nykz]

It shows a blank screen and also when using setCamera() the app crashes... .

My code is available in this github repo https://github.com/Nykz/ionic-capacitor-googlemaps-android-ios

[muuvmuuv]

From the docs: https://capacitorjs.com/docs/apis/google-maps#ios

The Google Maps SDK currently does not support running on simulators using the new M1-based Macbooks. This is a known and acknowledged issue and requires a fix from Google. If you are developing on a M1 Macbook, building and running on physical devices is still supported and is the recommended approach.

[Nykz]

On physical device (iphone se), it’s not showing that’s why I raised the question, The above image is from the physical device On Tue, 17 May 2022 at 10:12 PM, Marvin Heilemann @.***> wrote:

From the docs: https://capacitorjs.com/docs/apis/google-maps#ios

The Google Maps SDK currently does not support running on simulators using the new M1-based Macbooks. This is a known and acknowledged issue https://developers.google.com/maps/faq#arm-based-macs and requires a fix from Google. If you are developing on a M1 Macbook, building and running on physical devices is still supported and is the recommended approach.

— Reply to this email directly, view it on GitHub https://github.com/ionic-team/capacitor-plugins/issues/980#issuecomment-1129090047, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEYQLKSEBF2QMSMLGAFIC53VKPEAJANCNFSM5WDSLTIQ . You are receiving this because you authored the thread.Message ID: @.***>

[muuvmuuv]

Ah, sorry, thought you used an Emulator since you wrote "on MacBook".

[jongbonga]

Try

  ionViewDidEnter() {
    setTimeout(() => {
      this.createMap();
    }, 10);
  }

[Nykz]

@jongbonga already tried but not working, thanks for the response. @muuvmuuv no problem

[jongbonga]

@Nykz Did you run npx cap sync ? I had the same issue until I synched the pod and added the timeout. It finally worked both on my device and on my M1 emulator designed for iPhone

[dallastjames]

Hey @Nykz I took a look at your repo. I believe the issue is caused because you have capacitor-google-maps instead of capacitor-google-map (plural vs not). Because of this, it wont use the web component and will be missing the structure needed for iOS to create and embed the map. 👍

[Nykz]

I have even tried that, no difference

On Tue, 17 May 2022 at 10:21 PM, Nikhil Agarwal @.***> wrote:

On real device it’s not showing that’s why I raised the question

On Tue, 17 May 2022 at 10:12 PM, Marvin Heilemann < @.***> wrote:

From the docs: https://capacitorjs.com/docs/apis/google-maps#ios

The Google Maps SDK currently does not support running on simulators using the new M1-based Macbooks. This is a known and acknowledged issue https://developers.google.com/maps/faq#arm-based-macs and requires a fix from Google. If you are developing on a M1 Macbook, building and running on physical devices is still supported and is the recommended approach.

— Reply to this email directly, view it on GitHub https://github.com/ionic-team/capacitor-plugins/issues/980#issuecomment-1129090047, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEYQLKSEBF2QMSMLGAFIC53VKPEAJANCNFSM5WDSLTIQ . You are receiving this because you authored the thread.Message ID: @.***>

[jongbonga]

@Nykz here is your app running fine on my M1.

I changed your HTML to this

<ion-content>
  <capacitor-google-maps #map></capacitor-google-maps>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-button expand="block" (click)="locate()">Locate Me</ion-button>
  </ion-toolbar>
</ion-footer>

And your TS to

  ionViewDidEnter() {
    setTimeout(() => {
      this.createMap();
    }, 1000);
  }

make sure to npx cap sync

[Nykz]

@jongbonga thanks for your response, i tried it yesterday and even i tried just now with all the changes that you showed but not working in my M1

[thomasvidas]

We'll leave this issue open for visibility, but from Google themselves, Google Maps doesn't display on iOS simulators on M1 Macs. It will work on a physical devices

[muuvmuuv]

I am getting:

CapacitorGoogleMaps/Map.swift:274: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value
2022-05-21 11:18:53.536753+0200 App[4828:321965] CapacitorGoogleMaps/Map.swift:274: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value
(lldb) 

It seems that GMapView is undefined here, it does not get initiated. I am on my iPhone, no Simulator.

[muuvmuuv]

Ok, it seems I just had to do a setTimeout like suggested. @thomasvidas is there any "onReady" event we can listen to until the web component is ready? On slow devices I would need to increase the setTimeout and on fast decrease...

[Nykz]

@jongbonga its not working in my mac M1 after applying all your changes too, its still the same, there is a serious issue that's going on not only with me but with other people too. So kindly if there is any other solution do let me know...Gmapview not getting rendered in uiview, also current location functionality too not asking for permission even after making changes in info.plist...the problem is shown in my youtube video (https://youtu.be/75SwV2kNH4o)

[muuvmuuv]

My problem now is that the map just disappears when using tab navigation :D

[timeisgolden]

@muuvmuuv I am facing the same issue as you. the map is disappearing when changing tab navigation. Did you solve the issue?

[muuvmuuv]

@timeisgolden yes, I did. I have created a new render cycle by re-creating the map when the user comes back into the view with ionWillEnter and ionDidLeave.

Still, this method is inefficient because it forces the map to re-create all markers and tiles, which will also cause a flicker of the map and some time until it's loaded. Additionally, I have CSS set up that shows a loading indicator beneath the map, so it gets hidden when it finishes.

This will be somewhere in your map component. In your feature component, you would like to use ionViewDidEnter to call below again and again. And ionViewWillLeave to always make sure it gets destroyed on leaving the view.

    // BUG: Wait for UIViewController to be ready - https://github.com/ionic-team/capacitor-plugins/issues/980
    await sleep(0.345)

    if (this.#map) {
      await this.#map.removeAllMapListeners()
      await this.#map.destroy()
      this.#map = undefined
    }

    this.log.info(StackGlobal.Map, `Create map ${this.name}`)

    try {
      this.#map = await GoogleMap.create({
        id: this.name,
        element: this.mapRef.nativeElement,
        apiKey: environment.googleApiKey,
        forceCreate: true,
        config: {
          center: { lat, lng },
          zoom: this.zoom,
          styles: mapStyles,
        },
      })
    } catch (error) {
      this.log.error(StackGlobal.Map, 'Could not create map', error)
      return
    }