IONIC2 When maps loaded on div SIDEBAR menu item not clicked

Ionic Framework ionic-v3
1

Hello All

When map div loaded sidebar item not clicked even when i move finger on white screen background map is also scroll.

image
Screenshot_2017-04-06-16-43-17[1].jpg720×1280 55.4 KB

Your system information:
ordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v7.5.0
Xcode version: Not installed

2

What i do to resolve this is disable map click when the side menu is open, and enable it when is close.

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

this.events.subscribe('menu:closed', () => {
  this.map.setClickable(true);
});
3

Where i have to put this code ?

4

In your menu HTML you have to add this
<ion-menu [content]="content" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">

In the app.component.ts you have to import

    import { Events } from 'ionic-angular';

and create the two function menuOpened() and menuClosed() In the app.component.ts to

menuClosed() {
    this.events.publish('menu:closed', '');
}

menuOpened() {
    this.events.publish('menu:opened', '');
}

And in your page where you call the map in the constructor

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

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

Wath we do is create a listner who listen to the open and close menu, and when is done when enable or disable the map click

5

Sorry for incovinence Logic is clear but not workable.

6

Plz if you fix it with another solution pls share it with us :slight_smile:

7

Helllo Sir

As you mentioned above that logic is perfect but not working right now.

8

As you given solutions i had applied but the still problem is Exsits.

Help me to solve this problem.

9

Show your code initialization

10

Hello Sir

As attachment restricted you can check my code from below link

http://testing.iwonwebtech.com/ionic/map/app_src-7-Apr-2017.zip

Thanks
Pratk

11

You have to replace
let map: GoogleMap = this.googleMaps.create(element, {});

with
this.map: GoogleMap = this.googleMaps.create(element, {});

12

Hello Sir

this.map is solved now thx for support and i am happy that you take care of this critical solutions.