Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic 2 Native Map overlapping side menu

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.

like image 868
Reo Lim Avatar asked Dec 15 '16 04:12

Reo Lim


1 Answers

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.

like image 58
oborudko Avatar answered Sep 28 '22 06:09

oborudko