Google maps making sidemenu unusable

Ionic Framework ionic-v3
21

I had same problem and I solved by using <ion-toolbar> instead of <ion-navbar>

page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons left>
      <button ion-button icon-only (click)="toggleMenu()">
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>Page Two</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div #map id="map"></div>
</ion-content>

page.ts

  toggleMenu() {
    this.menuCtrl.toggle().then(() => {

      if(this.menuCtrl.isOpen()) {
        this.map.setClickable(false);
      } else {
        this.map.setClickable(true);
      }
    });
  }

toogleMenu() function is fired when menu button is clicked.
From there, I can check whether the menu is toggled and setClickable() [true/false]
I think this is the quickest way.

22

Hi, I had same problem with google map and sidemenu.
I added menuType=‘push’ and it work fine for me.
The problem is with menuType=‘overlay’ used for android.

details https://ionicframework.com/docs/v2/api/components/menu/Menu/

other solution:

In google map page:

 map: GoogleMap;
 ... 
 ...
    constructor(public menuController: MenuController, public platform: Platform) {
        let leftMenu = menuController.get('left');

        if (leftMenu) {
            leftMenu.ionOpen.subscribe(() => {
                if (this.map) {
                    this.map.setClickable(false);
                }
            });

            leftMenu.ionClose.subscribe(() => {
                if (this.map) {
                    this.map.setClickable(true);
                }
            });
        }
    }

Regards

23

Hello,

I tried using your solution but it does not work. When I click on side menu it throws the error as MyApp.html:1 ERROR TypeError: Cannot read property ‘setClickable’ of undefined.

Please help!

Thank You.

24

I am new to Ionic 2 and also to services. What is the exact structure of your map service?

I do not know how to use the code you provided to me;its giving me errors!

Thank You

25

Please post your code as well as the errors you’re getting.

26

I created a service for map-service like:

map-service.ts


import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import {GoogleMaps} from '@ionic-native/google-maps';
@Injectable()
export class MapService {

  constructor(public http: Http,public googleMaps:GoogleMaps) {
    console.log('Hello MapService Provider');

  }

}

Now in this block of code where am I suppose to include your solution?

Thank You

27

Hi Markus, sorry for the late reply, I was away for a while.
I’m not quite sure where you’re stuck. For my solution, you would put the code snippet marked as “in the map provider” just below your constructor in your provider (make sure to set the “settings” accordingly, most importantly to specify the container element for the map).
You’ll also need the other two code snippets I’ve posted in your app.component.ts and your map page