Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'nav-decor' hides GoogleMap #7205

Closed
ZiFFeL1992 opened this issue Jul 5, 2016 · 37 comments

Comments

Projects
None yet
@ZiFFeL1992
Copy link
Contributor

commented Jul 5, 2016

Short description of the problem:

Since this commit: 7842991

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

This comment has been minimized.

Copy link
Contributor

commented Jul 5, 2016

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

This comment has been minimized.

Copy link

commented Jul 7, 2016

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);
}
@ZiFFeL1992

This comment has been minimized.

Copy link
Contributor Author

commented Jul 7, 2016

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

@Ionitron Ionitron removed the needs: reply label Jul 7, 2016

@jgw96

This comment has been minimized.

Copy link
Contributor

commented Jul 13, 2016

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!

@jgw96 jgw96 closed this Jul 13, 2016

@ZiFFeL1992

This comment has been minimized.

Copy link
Contributor Author

commented Jul 18, 2016

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

This comment has been minimized.

Copy link

commented Jul 31, 2016

Same for me with the last nightly.

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

@pekastel

This comment has been minimized.

Copy link

commented Jul 31, 2016

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

@kaikcreator

This comment has been minimized.

Copy link

commented Aug 6, 2016

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

This comment has been minimized.

Copy link

commented Aug 14, 2016

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.
snip20160814_4

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

Other screen:
snip20160814_5

back to map:
snip20160814_6

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;
}

@davorpeic davorpeic referenced this issue Aug 19, 2016

Closed

Black Screen #7

@DavidTalamona

This comment has been minimized.

Copy link

commented Nov 16, 2016

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

This comment has been minimized.

Copy link

commented Nov 20, 2016

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

@tgensol

This comment has been minimized.

Copy link

commented Nov 20, 2016

+1

@EralpB

This comment has been minimized.

Copy link

commented Dec 6, 2016

+5

@dimitri320

This comment has been minimized.

Copy link

commented Feb 28, 2017

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

This comment has been minimized.

Copy link

commented Mar 28, 2017

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

@kaikcreator

This comment has been minimized.

Copy link

commented Mar 29, 2017

Try display none, it works for me:

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

This comment has been minimized.

Copy link
Contributor

commented Mar 29, 2017

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

This comment has been minimized.

Copy link

commented Mar 30, 2017

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

This comment has been minimized.

Copy link

commented Apr 15, 2017

app.scss

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

works for me

@szankelDvag

This comment has been minimized.

Copy link

commented Apr 28, 2017

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

This comment has been minimized.

Copy link

commented May 5, 2017

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

@dominikstrasser

This comment has been minimized.

Copy link
Contributor

commented May 5, 2017

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

This comment has been minimized.

Copy link

commented May 15, 2017

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

@wuilmerj24

This comment has been minimized.

Copy link

commented Jun 6, 2017

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

This comment has been minimized.

Copy link

commented Jun 8, 2017

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

This comment has been minimized.

Copy link

commented Jun 9, 2017

@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

This comment has been minimized.

Copy link

commented Jun 10, 2017

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.

@ISvengali

This comment has been minimized.

Copy link

commented Jun 11, 2017

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

This comment has been minimized.

Copy link

commented Jun 20, 2017

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

This comment has been minimized.

Copy link

commented Jun 20, 2017

@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

This comment has been minimized.

Copy link

commented Jun 27, 2017

@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

This comment has been minimized.

Copy link

commented Jun 30, 2017

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

This comment has been minimized.

Copy link

commented Jul 1, 2017

In my case, it was background not display.

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

@cristian-milea

This comment has been minimized.

Copy link

commented Jul 3, 2017

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!

masashiGMS pushed a commit to mapsplugin/cordova-plugin-googlemaps that referenced this issue Jul 5, 2017

@wf9a5m75

This comment has been minimized.

Copy link

commented Jul 6, 2017

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

This comment has been minimized.

Copy link

commented Aug 22, 2017

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

This comment has been minimized.

Copy link

commented Sep 2, 2018

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 2, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.