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

Answer 3

you could actually set it like this:

Map

<ion-item nav-clear menu-close ng-click="fuction to call the map page">

or

<ion-item nav-clear menu-close ui-sref="url to page">

*when you click on Map in menu the side menu closes and the page gets displayed.

Answer 4

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

Answer 5

You need changed type for default on tag ion-menu

<ion-menu type="reveal" [content]="content">
...
...
...
</ion-menu>

Answer 6

Because the map of cordova-google-maps plugin follows the mapDiv position.

The ionic-framework creates the side menu under the map div.

You should create the side menu above the map div.

Check out here. https://forum.ionicframework.com/t/using-google-maps-cordova-plugin/4456/49

Answer 7

I have found it FINALLY!!

You have to hide the <ion-side-menu> when transitioning to the map. For example (what I did):

document.getElementById("side-menu").style.visibility = 'hidden';

When transitioning away from the map, inside the $stateChangeSuccess callback, set it back to "visible"

Hope this helps!