Google Map gets hidden after route change

Bug Report

Plugin(s)

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 3.5.1
  @capacitor/core: 3.5.1
  @capacitor/android: 3.5.1
  @capacitor/ios: 3.5.1

Installed Dependencies:

  @capacitor/android: 3.4.3
  @capacitor/ios: 3.4.3
  @capacitor/core: 3.4.3
  @capacitor/cli: 3.4.3

[success] iOS looking great! 👌
[success] Android looking great! 👌

Platform(s)

iOS and Android

Current Behavior

Awesome plugin. However I have an issue rendering the map. At first it works fine, but after changing routes and goes back to the route where map is shown, it won't load anymore. Btw, the map is shown in a tab

Expected Behavior

Should not get hidden after route change

Code Reproduction

const mapElement = document.getElementById('my-map');
    const mapConfig = {
      center: {
        lat: 33.6,
        lng: -117.9,
      },
      zoom: 8,
      androidLiteMode: false,
    };
    const mapOptions = {
      id: 'map',
      apiKey: MAP_APIKEY,
      config: mapConfig,
      element: mapElement,
    };
    const map = await GoogleMap.create(mapOptions);

Hi warjohn123,

i had the same problem and found my solution in https://github.com/ionic-team/capacitor-plugins/issues/980.

After I have encapsulated the GoogleMap.create in a timeout, the problem was resolved.

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

In my opinion, it's a hard way and only a workaround :-)

There's a problem in the module, i think. So this issue must be proof from the capacitor team.

setTimeout works but feels very very wrong, especially if you have a lot of places, the tiles from Gmaps have to be loaded each time and you need some functionality to "destroy" the map properly. Our app crashed after several page back and forth transitions, I guess due to memory, even with ngOnDestory to destroy the existing map.

bump

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks! Ionitron 💙

I reproduced this issue with Ionic on iOS.

Other than in Android, where the map is added natively behind the Webview, iOS can access the webview items and append UIViews. iOS workflow:

• Search all subviews of webview for target container (capacitor-google-maps of type WKChildScrollView)
• Add the map as UIView to this target container (this also syncs the x and y changes on scroll)

When you now navigate to another page, the page with the map gets hidden with display: none. This causes the map to not show again. I also tested it with safari remote tools and just set display: none to the capacitor-google-maps container and then removed this rule again with the result, that the map is not displayed anymore.

I debugged it with "Capture View Hierarchy" tool in XCode and for whatever reason the target container does not contain the map-controller anymore.

As workaround it would be possible to recreate the map instance whenever an ionic page is shown (i.e. ionViewWillEnter).

I added a fix for this with the help of the ResizeObserver. As I am already implemented it for another feature, I extended the PR https://github.com/ionic-team/capacitor-plugins/pull/1595

I added a fix for this with the help of the ResizeObserver. As I am already implemented it for another feature, I extended the PR #1595

A big thank you for this @AE1NS. I'm not familiar with the process: will this be merged into main within a foreseeable future?

Cant answer this, I am just a contributor not a maintainer. PR is opened and we have to wait for the ionic team to fully test it so they can decide if it gets applied.

That was probably a coincidence that the PR was merged some hours after your post 😅

closing since https://github.com/ionic-team/capacitor-plugins/pull/1595 got merged and released