Ionic-framework: 'nav-decor' hides GoogleMap

[guillenotfound]

Short description of the problem:

Since this commit: https://github.com/driftyco/ionic/commit/7842991c1a0771639df5e7c7df0eed47549c5a00

There is a black layer between the touchable transparent layer and the map while using https://github.com/mapsplugin/cordova-plugin-googlemaps plugin on iOS platform.

What behavior are you expecting?

See the map. Workaround:

 ionViewWillEnter(): void {
    document.getElementsByClassName('nav-decor')[2].className += ' hide';
    document.getElementsByClassName('nav-decor')[3].className += ' hide';
  }

  ionViewWillLeave(): void {
    document.getElementsByClassName('nav-decor')[2].className = 'nav-decor';
    document.getElementsByClassName('nav-decor')[3].className = 'nav-decor';
  }

I have a tabs template with 3 tabs.

Which Ionic Version? 1.x or 2.x
2.0.0-beta.10

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.3.0
Xcode version: Xcode 8.0 Build version 8S128d

[jgw96]

Hello, thanks for opening an issue with us! Would you be able to provide a repo that demonstrates this issue? Thanks for using Ionic!

[lthh89vt]

I'm having exact same issue.

nav-decor created a black layer on top of the map.

My way to fix it is using css

ion-app._gmaps_cdv_ .nav-decor {
    background-color: rgba(0,0,0,0);
}

[guillenotfound]

That way is better than mine, I'll provide an example of the bug later today :)

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[guillenotfound]

This still an 'issue' after updating my app to latest nightly.

Demo: https://drive.google.com/file/d/0B5rCifUQQ0c4R1ZvTFIzOXZRQVU/view?usp=sharing
If I remove from safari nav-decor layer I can see the map.

I'll keep disabled the transitioning shadow on maps, that seems to be the best solution.

[tgensol]

Same for me with the last nightly.

I used the solution by @lthh89vt , and it is working great !

[pekastel]

+1 for the @lthh89vt solution! It's working for me too.

[kaikcreator]

Same issue still afecting with ionic 2.0.0 beta 11, and solved with trick from @lthh89vt

@jgw96: as this is not caused by the plugin but by the nav-decor layer that ionic adds, shouldn't this issue be left open until it is solved? Maybe @lthh89vt solution must be included in ionic CSS.

[infinitysky]

Hi all, this problem still affect on my project.

Here is my development environment:
Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.8.6
ios-sim version: 3.1.1
OS: Mac OS X El Capitan
Node Version: v4.4.3
Xcode version: Xcode 7.3 Build version 7D175

I have to enable the scss code for nav-decor

ion-app._gmaps_cdv_ .nav-decor{
  background-color: transparent !important;
}

I have to say yes it works for me temporarily. However, on my project, I have got multiple tabs then it cause the following problem:
After I boot up the application, It looks OK.

However, once I am going to other tab and back. It shows me this screen.

Other screen:

back to map:

These two screens have been puts together, and the google map is missing....

Anybody have ideas to help me gets out of this "hole" please?

there is my code for map:

import {Component} from "@angular/core";
import {NavController, Platform} from 'ionic-angular';
import {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, GoogleMapsMarkerOptions,Geolocation} from 'ionic-native';

@Component({
  templateUrl: 'build/pages/maps/maps.html'
})

export class MapsPage {
  private map: GoogleMap;

  constructor(private _navController: NavController,private platform: Platform) {
    this.platform.ready().then(() => this.onPlatformReady());
  }
  private onPlatformReady(): void {
    GoogleMap.isAvailable().then(() => {
      this.map = new GoogleMap('map_canvas');
      this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
        let myPosition = new GoogleMapsLatLng(38.9072, -77.0369);
        console.log("My position is", myPosition);
      });
      this.map.setBackgroundColor("white");
      this.map.setMyLocationEnabled(true);
    });
  }
}

html :

<ion-header>
  <ion-navbar>
    <ion-title>
      Maps View
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <h2>hihi</h2>
    <div id="map_canvas">

    </div>
</ion-content>

scss file

.maps {

}
ion-app._gmaps_cdv_ .nav-decor{
  background-color: transparent !important;
}

[DavidTalamona]

The issue still exists in 2.0.0.rc2 and I think it should still be fixed cause people like me keep running into this and it took me a while to find the CSS hack above.

@jgw96 please re-open this ticket here because I did not find another one that's open and trackable.

[kodeine]

@jgw96
i am facing the same issue on iOS. Can someone please make this a priority?

[tgensol]

+1

[EralpB]

+5

[dimitri320]

Same here, and none of the CSS tricks work for me. The map still doesn't show.
I am however getting API Requests recorded on the Google Console, so the calls are being made, but the map is not being displayed.

[lukeb2014]

Getting the same issue.
Map on iOS causes black background instead, CSS tricks didn't work.

[kaikcreator]

Try display none, it works for me:

ion-app._gmaps_cdv_ .nav-decor{
    display: none !important;
}

[dominikstrasser]

Fyi: For me the Map only works in "pages" not in modals. So maybe try to set your "map-page" as root page and don't modalCtrl.create(..).present() it...

[lukeb2014]

I added that css @kaikcreator and it didn't work. However, the code is correct as when I open safari inspector and set nav-decor to display: none it works. I probably need to clean and rebuild and it'll work fine, or I need to adjust the css element. Thanks!

Edit: I had it in my page's scss. I looked and apparently nav-decor is outside of the page element, so I needed to put the scss in app.scss. Now it works perfectly. Again, thank you so much!

[hamdiceylan]

app.scss

ion-app._gmaps_cdv_ .nav-decor{
background-color: transparent !important;
}

works for me

[szankelDvag]

I have the same issue:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v7.6.0
Xcode version: Xcode 8.3.2 Build version 8E2002

Ionic native 3.5

I also have the issue on Android. We are trying to display the map in a small container on the page and the cordova js is walking up the DOM making any parents black.

Can somebody help?

[joesleiman]

app.scss :
ion-app._gmaps_cdv_ .nav-decor{
background: none !important;
}
solved my issue

[dominikstrasser]

fyi - if you see the map but you can't interact (click, drag, zoom, ...) then use

ion-app.gmaps_cdv .nav-decor{
   display: none !important;
}

at least this works for me ;)

[petivagyok16]

Had the same issue on android, in chrome. CSS tricks solved it.

[wuilmerj24]

Greetings I added both app.css, as in the home.css and it does not work for me. Here I leave the repo for you to review

[Stukongeluk]

Well after adding:

ion-app.gmaps_cdv .nav-decor{
   display: none !important;
}

The map loads, but I can't navigate to other pages for some reason anymore.
Using a side-menu here to navigate. Without the css code, the apps works perfectly except the page which has Google maps.
This problem only exists on a iOS device or emulator.

EDIT: Well now even without editing the css, the side-menu just does nothing after a few presses.

[jsanta]

@Stukongeluk Just faced the same problem with the sidemenu.
Try something like this on your constructor:

constructor(private geolocation: Geolocation,
    private googleMaps: GoogleMaps,
    public navCtrl: NavController,
    public navParams: NavParams,
    public menuController: MenuController) {

    // https://forum.ionicframework.com/t/google-maps-making-sidemenu-unusable/69237/22
    let leftMenu = menuController.get(); //  menuController.get('left');

    if (leftMenu) {
      leftMenu.ionOpen.subscribe(() => {
        console.log('Menu opened');
        if (this.map) {
          this.map.setClickable(false);
        }
      });

      leftMenu.ionClose.subscribe(() => {
        console.log('Menu closed');
        if (this.map) {
          this.map.setClickable(true);
        }
      });
    }
  }

[jsanta]

Still an issue on latest Ionic (v3.3.0)

    Cordova Platforms               : android 6.1.2 ios 4.3.1
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v8.0.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002
    ios-deploy : 1.9.1
    ios-sim    : 5.0.6

Workaround:
On your map's page scss file add the following at the end (after the page-map {}block:

.ios page-map.ion-page.show-page ~ .nav-decor {
    display: none!important;
}

(supposing your map page is called map)

Tried all CSS workarounds mentioned before, but none worked for me, so I figured this out debugging using Safari.
Now I'm struggling with a navigation issue, but that's another story.

[moussa-mokhtari]

I have the same issue the map is shown but you can't do any thing ,like there is another layer on top of it only on ios ,
@jsanta did u manage to solve it ?

[Hanzofm]

Hi,
Same problem with IOS.

I've already tried

ion-app.gmaps_cdv .nav-decor{
display: none !important;
}
And the other versions and then I have no black screen but the layout of the maps is not showing. The event of MAP_READY is fired and on android same code is working correctly

Like this

http://i66.tinypic.com/2j2sxau.png

Any idea?

[jsanta]

@MMokhtari Solved the problem using the code I included. Try to debug your app using the code inspector in Safari.
Also try not to mix solutions.

And beware of the sidemenu isopen/isclosed observable, you can have a memory leak because of not unsubscribing to these events.

[efstathiosntonas]

@Hanzofm I used @jsanta solution, keep in mind that the css code must be outside of page-map, example:

.ios page-map.ion-page.show-page ~ .nav-decor {
  display: none !important;
}

page-map {

  #map {
    height: 100%;
  }

}

[jorgemejia]

My solution was, do not initialize the map on the constructor, initialize it on the ionViewDidLoad.

ionViewDidLoad() {
    console.log('ionViewDidLoad Maps');
    setTimeout(()=>{
        this.loadMap();
    }, 1000)

  }

[soulmecca]

In my case, it was background not display.

.ios .ion-page.show-page ~ .nav-decor {
background: none;
}

[cristian-milea]

i got the black screen. pulling my hair for about 3h now...

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.1
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : ios 4.4.0
Ionic Framework                 : ionic-angular 3.4.2

System:

Node       : v7.10.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
ios-sim    : 6.0.0
npm        : 5.0.4

i just followed the official ionic docs... why can't this be sufficient? why do i have to spend hours and hours on forums and stackoverflow...

i love you Ionic but you don't love me back!

[wf9a5m75]

This is the author of the cordova-googlemaps-plugin.

As of the google maps plugin 2.0.0-beta2-20170705-1715, the plugin inserts the css automatically.

._gmaps_cdv_ .nav-decor {
    display: none !important;
    background-color: rgba(0,0,0,0) !important;
    background: rgba(0,0,0,0) !important;
}

This thread helps me to solve this issue. Thank you for discussing.

[andaGS]

its not work,my ios still black screen, please help me
thre is my css:
ion-app._gmaps_cdv_ .nav-decor{
background-color: transparent !important;

  }

page-belanja-map {
#map {
width: 100%;
height: 60%;
}
}

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.