Ionic Sidemenu and Native Google Maps

user_2863079 0
Viewed 2971

I am developing an Ionic application where I'm using the side-menu. When navigating to a template that's only a div for rendering Google Maps (native using cordova-plugin-maps). The side-menu is overlayed over the map. The weird thing is I can interact with the map through the side-menu.

It works fine when using Javascript Google Maps.

Here's a screenshot of how it looks:

enter image description here

The same thing appears on an Android device.

The help in resolving is highly appreciated!!

EDIT: I forgot to mention that I'm transitioning from a normal page (not the side-menu), hence the back button above. I hope that makes it more specific.

ionic-framework cordova google-maps
7 Answers

Personally, I found an elegant solution (right menu) :

.menu.menu-right {
    transform: translate3d(100%, 0, 0) !important;
    -webkit-transition: transform 200ms ease;
    transition: transform 200ms ease;
}

.menu-open {
    .menu.menu-right {
        transform: translate3d(0, 0, 0) !important;
    }
}
user_57277720
Related