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:

[![enter image description here](https://i.stack.imgur.com/tA9rL.png)](https://i.stack.imgur.com/tA9rL.png)

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: 
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!
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>

![](https://googledrive.com/host/0B1ECfqTCcLE8SVJLc2VWZHV3dWM/ionic_sidebar.gif)