Ionic Sidemonu and Native Google Maps

Question

I am developing an Ionic application in which I use the side menu. When navigating to a template that contains only a div for rendering Google Maps (native using cordova-plugin-maps). A side menu is overlaid on the map. It is strange that I can interact with the card through the side menu.

It works great when using Javascript Google Maps.

Here is a screenshot of what it looks like:

The same thing appears on an Android device.

Help in resolving is welcome!

EDIT: I forgot to mention that I go from the normal page (and not the side menu), hence the back button. Hope this makes it more specific.

Answer 1

I found it FINALLY !!

When switching to a map, you need to hide <ion-side-menu> . For example (what I did):

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

When moving from the card, in the callback of $ stateChangeSuccess, set it back to "visible"

Hope this helps!

Answer 2

This works for me: 1. Put ng-hide in

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

2. observe the $ ionicSideMenuDelegate in the 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 3

scss ionic.app.scss or www / csss /

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

Answer 4

you can install 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 “Map” in the menu, the side menu closes and the page is displayed.

Answer 5

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 6

You need to change the default type to ion-menu tag

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

Answer 7

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

The ionic structure creates a side menu under the card splitter.

You need to create a side menu above the map splitter.

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