Ionic Native Google Maps plugin: map disappears after navigating to internal page, possible stacking issue

Ionic Native
1

I’ve successfully implemented my map with all my markers and it works great. When switching between top level tabs, the map is always available and loaded. But as soon as I switch to a subpage/nested page (i.e. one with a back button) on a separate tab, returning to my map tab shows a blank screen. But the map is actually still there. I can log the object to my console and am not getting any errors.

Interestingly, when I open an infowindow before making the map disappear (by navigating to a new tab and then clicking on a nested page), the infowindow will still be there and open when I return, albeit on a blank canvas. Dragging the infowindow causes the existing map to be visible again.

IMG_1526
IMG_1526.jpg750×1334 232 KB
IMG_1527
IMG_1527.jpg750×1334 117 KB

I think what’s happening is that the page stacking of inactive nested pages is actually blocking the view of the map, which ends up being stacked beneath another page. As I understand it the native map runs underneath the webview, so it’s easy to imagine that this is a z-index or transparency issue.

Can anyone verify or offer tips to fix this?

  ngAfterViewInit(){
    console.log('ngAfterViewInit MapPage');
    this.loadMap(); // works fine every time without error
  }

  ionViewDidEnter(){
    console.log('ionViewDidEnter MapPage');
    console.log(this.map); // always returns the map object so it's still there
    if(!this.map) this.loadMap(); // never needs to fire 
    // need to reset tab/page stacking order?
  }

com.googlemaps.ios 2.6.0 "Google Maps SDK for iOS"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.2.4 "cordova-plugin-googlemaps"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-sqlite-storage 2.2.0 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0


local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.1
    ios-sim    : 5.0.11
    Node       : v6.9.1
    npm        : 3.10.8
    OS         : macOS High Sierra
    Xcode      : Xcode 9.2 Build version 9C40b

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

EDIT: I should add that I’m testing on a physical device, iPhone 8, iOS 11.2.6. The problem happens in the Simulator as well, though less consistently.

3

The map is automatically removed when the map div is removed.

If you want to keep the map instance, you need to detach the map from webview at once, then attach again when you come back to the map page.

2020

1 Like
4

Thanks so much @wf9a5m75! Your work and support is much appreciated. Look for a small donation soon.

  initialMapLoad: boolean = true;

  // ...

  ngAfterViewInit(){
    this.loadMap();
  }

  ionViewWillEnter(){
    if (!this.initialMapLoad) {
      // reset div & *then* set visibility to smooth out reloading of map
      this.map.setDiv('map');
      this.map.setVisible(true);
    } else {
      this.initialMapLoad = false;
    }
  }

  ionViewWillLeave() {
    // unset div & visibility on exit
    this.map.setVisible(false);
    this.map.setDiv(null);
  }
3 Likes
5

Quick update: On occasion, the map does still disappear. I’ve updated ionViewWillEnter as follows…

  ionViewWillEnter(){
    if (!this.initialMapLoad) {
      this.map.setDiv('map');
      this.map.setVisible(true);
      setTimeout(()=>{
        // hack to fix occasionally disappearing map
        this.map.setDiv('map');
      }, 1000);      
    } else {
      this.initialMapLoad = false;
    }
  }

This consistently fixes the issue after 1000ms when the map hasn’t loaded automatically (maybe 1 in 10-20 times), and doesn’t seem to interfere in any way when it’s unnecessary (most of the time).

Ideally there would be some condition I could check to detect when the hack is actually necessary but I can’t seem to find any way to test if the map is properly loaded and displayed (e.g. getDiv() returns an object even when the map has failed to load).

2 Likes
6

Hi when i try this workaround, my map did shows up again, but i cant move or zoom the map, the map is like freezing. Do you experience this too ? mind if you share your code thanks .

7

You could try checking to see if it’s the first map load, and only reset the div when it’s not…

1 Like
8

thanks very much, it works now. you are the best

2 Likes