Google Maps native and side menus

Ionic Framework ionic-v3
1

Hi!

I’m using the Google Maps from ionic native. I can easily display a map in my app but when I open the side menu (which is displayed on top of the map), the map captures all the events.
I can’t use the side menu buttons. If i tap on a button, the map is moving.
I tried to modify the z-index of the menu and the gmaps container div but nothing changes.

Here is some of my code:

<div id="map-container" data-tap-disabled="true"></div>
nt-map{ #map-container{ position: absolute; top: 55px; bottom: 0; left:0; right: 0; z-index: 1; } }

Am I doing something wrong?

Thanks

2

Hey,

Did you solve the problem?
Because I’m having the same problem right now…

best regards,

3

Nope, but it was for a project that have been postponed so I haven’t really worked on that issue since I posted this message. Please keep me informed if you find the issue :slight_smile:

4

Hi @chevpa and @sebi_b

Here is a workaround

    import { MenuController } from 'ionic-angular';
    import { GoogleMap } from 'ionic-native';
    
    ......   
    ......
    gmap: GoogleMap;

    constructor(public menuController: MenuController) {
       this.workaroundSideMenu();
    }
    
   .....

    private workaroundSideMenu() {
            let leftMenu = this.menuController.get('left');

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

                leftMenu.ionClose.subscribe(() => {
                    this.gmap.setClickable(true);
                });
            }
    }
3 Likes