Cordova-plugin-googlemaps: Sidemenu overlap

Created on 25 Feb 2016 · 8Comments · Source: mapsplugin/cordova-plugin-googlemaps

Guys do you have any idea how to solve this issue ? When I drag the sidemenu back and forth it looks like the map div including all the items wrapped inside are on top of the sidemenu and the map is behind the sidemenu and it looks weird. Even if i open/close the menu programatically it is the same effect

Source

denkomanceski

Most helpful comment

In my case I didn't do a trick with hide/show side bar, instead I just slide a menu of the the screen.

.menu {
  transform: translateX(-275px);
  -webkit-transition: -webkit-transform 200ms ease;
  transition: transform 200ms ease;
}

.menu-open {
  .menu {
    transform: translateX(0px);
    -webkit-transition: -webkit-transform 200ms ease;
    transition: transform 200ms ease;
  }
}

gboiko on 13 Apr 2016

👍5

All 8 comments

you can't use a revealing sidebar - only a pushing one (which really pushes the map out).
Overlaying one will not work.

If you're on OnsenUI for example, just change the sidebar from reveal to push. Ionic has something similar

Hirbod on 25 Feb 2016

How can I fix it on Ionic?

raphaeldealmeida on 23 Mar 2016

@raphaeldealmeida Read here https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Ionic-Side-Menu-with-the-plugin

wf9a5m75 on 24 Mar 2016

👍2

Great! Its works.
Please make it visible on the wiki. I couldn't find it there.

Thanks!

raphaeldealmeida on 25 Mar 2016

But this disables the side menu for the view? Now if you click on the menu icon, the side-menu is expands but is blank?

samuelgoldenbaum on 11 Apr 2016

In my case I didn't do a trick with hide/show side bar, instead I just slide a menu of the the screen.

.menu {
  transform: translateX(-275px);
  -webkit-transition: -webkit-transform 200ms ease;
  transition: transform 200ms ease;
}

.menu-open {
  .menu {
    transform: translateX(0px);
    -webkit-transition: -webkit-transform 200ms ease;
    transition: transform 200ms ease;
  }
}

gboiko on 13 Apr 2016

👍5

Thanks gboiko, best solucion, it's work very well !

pierreNeck on 30 Apr 2016

I simply did this:
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/Ionic-Side-Menu-with-the-plugin/README.md

And added the below code to hide the header. So that i don't need to worry when de user opens the map and click side bar menu, playing around the app navigation.

<ion-view hide-nav-bar="true">
    <ion-content has-header="false" padding="false" scroll="true">
        <div id="map" data-tap-disabled="true"></div>
    </ion-content>
</ion-view>