Ionic 2 Native Map overlapping side menu

Question

Created Ionic 2 Native map following Josh Morony tutorial:

http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/ .

Everything works well. Here's the problem:

My view have a side menu, when I click on side menu, it toggles appear, but the options inside are unclickable. When I double click the menu option in emulator, the map zoomed in. The map has overlapped my side menu, is there any solution for this emergency?

Thank you.

Answer 1

I can't provide a solution for you, but Josh did a nice write-up on some of the issues you can expect with using the Cordova maps plugin, including the exact scenario we're both running into:

https://www.joshmorony.com/google-maps-in-ionic-2-native-or-web/

In short, since we're using Ionic 2 it might be best to simply go with the javascript SDK instead of the native plugin. I suspect that'll play much nicer with Ionic in general.

Answer 2

it is expected behaviour according to the plugin documentation, what you need to do is when sidebar is opened - map.setClickable(false), then when it closes turn back the clickable to true.

For example, let's presume that the menu is on the main component, so u do something like this in the template (app.html):

<ion-menu #sidebar [content]="content" (ionOpen)="onMenuOpen($event)" (ionClose)="onMenuClose($event)"> 

in app.ts or however it is called for you

    onMenuOpen(event) {
    this.events.publish('sidebar:open');
}

onMenuClose(event) {
    this.events.publish('sidebar:close');
}

then on the map component u attached a listener when the map is ready:

            map.one(GoogleMapsEvent.MAP_READY).then(() => {

            this.events.subscribe('sidebar:open', () => {
                map.setClickable(false);
            });

            this.events.subscribe('sidebar:close', () => {
                map.setClickable(true)
            });

and probably unsubscribe when the page is closed:

    ionViewWillLeave() {
    this.events.unsubscribe('sidebar:open');
    this.events.unsubscribe('sibebar:close');
}

do not forget to

import { Events } from 'ionic-angular';

and inject the events in each component constuctor

constructor(
    private events: Events
) {

hope that helps.

Answer 3

<ion-menu type="push" [content]="content"> works good for me

Answer 4

In Ionic Framework 2 you could force the menu type to quickly overcome this problem.

<ion-menu [content]="mycontent" type="push">
  <ion-content>
    <ion-list>
      <p>some menu content, could be list items</p>
    </ion-list>
  </ion-content>
</ion-menu>

or overwrite the config variable menuType in your @NgModule

@NgModule({
  ...
    imports: [
  IonicModule.forRoot(MyApp, {
    menuType: 'push',
    }, {}
  )],
...
})

I'm still looking for a fix, will update when found.