Side menu overlap when used with cordova-plugin-googlemaps

ionic-v1
1

Dear expert,
I have an app which uses side menu, side menu works perfectly on all other pages except for one page which uses google maps. The side menu overlaps the maps.

I set sidemenu element to hidden and then I inspected the element using chrome//inspect and I got this:



      <ion-nav-buttons side="left" class="hide"></ion-nav-buttons>
    <div class="nav-bar-block" nav-bar="cached"><ion-header-bar class="bar-myApp-assertive bar bar-header" align-title="left"><button ng-click="$ionicGoBack()" class="button back-button hide buttons  button-clear header-item"><i class="icon ion-android-arrow-back"></i> 
      <span class="back-text"></span></button><div class="buttons buttons-left header-item"><span class="left-buttons">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </span></div><div class="title title-left header-item"></div></ion-header-bar></div><div class="nav-bar-block" nav-bar="active"><ion-header-bar class="bar-myApp-assertive bar bar-header" align-title="left"><button ng-click="$ionicGoBack()" class="button back-button hide buttons  button-clear header-item"><i class="icon ion-android-arrow-back"></i> 
      <span class="back-text"></span></button><div class="buttons buttons-left header-item"><span class="left-buttons">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </span></div><div class="title title-left header-item" style="left: 50px; right: 66px;"><span class="nav-bar-title ng-binding">Map</span></div><div class="buttons buttons-right"><span class="right-buttons">
    <button class="button button-icon" ng-disabled="items.length === 0" ng-click="openItemsModal()">
      <i class="icon ion-ios-list-outline"></i>
    </button>
    </span></div></ion-header-bar></div></ion-nav-bar>
    <ion-nav-view name="menuContent" class="view-container _gmaps_cdv_" nav-view-transition="android" nav-view-direction="none" nav-swipe="" style="background-color: rgba(0, 0, 0, 0);"><ion-view class="items-view pane _gmaps_cdv_" state="app.xxx" nav-view="active" style="transform: translate3d(0%, 0px, 0px); opacity: 1; background-color: rgba(0, 0, 0, 0);">
  <ion-nav-title class="hide"></ion-nav-title>
  <ion-nav-buttons side="right" class="hide"></ion-nav-buttons>
  <ion-content class="scroll-content ionic-scroll _gmaps_cdv_ overflow-scroll  has-header has-footer" style="background-color: rgba(0, 0, 0, 0);"><div class="scroll _gmaps_cdv_" style="background-color: rgba(0, 0, 0, 0);">
    <div id="map_canvas" class="_gmaps_cdv_" style="background-color: rgba(0, 0, 0, 0);"></div>
  </div></ion-content>
  <ion-footer-bar ng-class="{'bar-myApp-assertive': theme }" class="bar bar-footer bar-myApp-assertive" style="">
    <div class="buttons buttons-center">
      <button class="button button-myApp-assertive" ng-click="onSearchItems()">
        Search in this area
      </button>
    </div>
  </ion-footer-bar>
</ion-view></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu id="side-menu" side="left" expose-aside-when="large" is-enabled="true" width="275" class="menu menu-left" style="visibility: hidden; width: 275px; z-index: 0;">
    <ion-content class="menu-myApp-assertive"><div class="scroll">
      <img class="img-profile" width="96" height="96" actual-src="main/assets/images/avatar.png" ng-src="main/assets/images/avatar.png" src="main/assets/images/avatar.png">
      <h5 class="title-profile ng-binding" ng-class="{ hidden:!user }">
        
      </h5>
      <ion-list class="disable-user-behavior"><div class="list">
        <ion-item menu-close="" nav-clear="" ng-click="onNavigateToSearch()" class="item ng-binding">
          <i class="icon ion-search"></i> Search
        </ion-item>
        <!-- ngIf: user --><ion-item menu-close="" nav-clear="" ng-click="onNavigateToProfile()" ng-if="user" class="item ng-binding">
          <i class="icon ion-person"></i> Profile
        </ion-item><!-- end ngIf: user -->
        <ion-item menu-close="" nav-clear="" ng-click="onOpenSettings()" class="item ng-binding">
          <i class="icon ion-gear-a"></i> Settings
        </ion-item>
        <!-- ngIf: !user -->
        <!-- ngIf: user --><ion-item menu-close="" nav-clear="" ng-click="onLogout()" ng-if="user" class="item ng-binding">
          <i class="icon ion-log-out"></i> Log Out
        </ion-item><!-- end ngIf: user -->
      </div></ion-list>
    </div></ion-content>
  </ion-side-menu>
</ion-side-menus>

However, I don’t want to hide the sidemenu. Any idea how to make it work with google maps?
Can you please help me?

Thank you,

Regards,
lola

2

can you attach some screenshots. Please try to load the google maps to other pages to determine if it is the specific page issue or problem with the googlemap. If the problem persist let me know the directive you are using for google maps.

3

@harshit886
First of all, many thanks for help me out.
It’s that specific page issue. And it’s a known issue:

I don’t want to use the solution provided by the above link since it hides the side menu. I don’t want that.

I then found another link which discussing some similar issue:

If I use the solution provided by one of the users:

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

The side menu starts working. However, if I open a modal from the side menu, the items on the modal become not-clickable.

The html code of the page is:
> 

      <ion-nav-title>{{ "mapTitle" | translate }}</ion-nav-title>
      <ion-nav-buttons side="right">
        <button class="button button-icon" ng-disabled="items.length === 0"
          ng-click="openItemsModal()">
          <i class="icon ion-ios-list-outline"></i>
        </button>
        </ion-nav-buttons>
      <ion-content>
        <div id="map_canvas"></div>
      </ion-content>
      <ion-footer-bar ng-class="{'bar-{{theme}}': theme }">
        <div class="buttons buttons-center">
          <button class="button button-{{theme}}" ng-click="onSearchItems()">
            {{ "searchInThisAreaText" | translate }}
          </button>
        </div>
      </ion-footer-bar>
    </ion-view>
4

You need to set map.setClickable(false) to disable map click so that you can make other clickable

1 Like
5

Hello, I have the same problem and the proposed solutions the only thing they get is to display the side menu in white.
I would like that when doing ‘onSwipeRight’ within the map do not show the side menu.

I’ve tried something with

$ (mapa) .on ( 'swipeleft swiperight', '.selector', function (event) {
  Event.stopPropagation ();
  Event.preventDefault ();
});

But I can not solve the problem.

Please, someone has the solution. Thanks in advance.

6

Good, I continue with more tests …

I have also tested what tux says on the link Google Maps Plugin and side menu
And it does not solve my problem either.
I leave a summary of my problem in case anyone knows the solution.

I need when the user moves the map, in any direction, NEVER show the menu.

image
2016-11-10_14-17-28.jpg336×586 56.7 KB

Thanks to your solution I have tried several options, but none have been satisfactory.

<Ion-side-menu side = "left" ng-hide = "menuHidden" can-swipe = "menuHidden" ngSwipeLeft = "menuHidden" ng-animate-swap = "menuHidden">

I leave here the comment in case you or another person can help me.

NOTE: There are cases where it works well and these are:
1.- When you first enter the view, loaded from

$ UrlRouterProvider.otherwise ( '/menu/mapa_dmb');

2.- When you change your view in the menu and from the same menu is re-entered on the map.

It is only failing when there is a view before such as “login” or “pincode” and displays the map after login or pincode.

$ State.go ( 'menu.mapa_dmb');

In case it serves anything. :slight_smile:

7

You can also try to disable cache of the controller which displays a view with map

8

Tested and not working, thank you.

9

AsmaaAlamrawy proposes the following:

Https://forum.ionicframework.com/t/google-maps-plugin-and-side-menu/39256/7?u=disak

It is not the best solution but it solves part of the problem.