Ionic Sidemenu and Native Google Maps

Question

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:

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.

Answer 1

This works for me: 1. Place ng-hide to

<ion-side-menu side="left" data-ng-hide="hideLeft">

2. watch the $ionicSideMenuDelegate in menu controller

// hack sidemenu overlay $scope.$watch(function () { return $ionicSideMenuDelegate.getOpenRatio(); }, function (newValue, oldValue) { if (newValue == 0) { $scope.hideLeft = true; } else { $scope.hideLeft = false; } });

Answer 2

scss ionic.app.scss or www/csss/

body.menu-open .menu.menu-left {
    visibility: visible;
}
.menu.menu-left {
    visibility: hidden;
}