Cordova-plugin-googlemaps: Overlapping Elements are not clickable. (Ionic)

[domske]

Components like ActionSheetController (Buttons) are not clickable when overlapping the Google Maps Container HTMLElement.

Tested with Ionic (cordova).

Reproduce:

1. Start a new ionic app ionic start Map tabs
2. Add Google Maps: https://ionicframework.com/docs/native/google-maps/
3. Workaround for Black Screen Bug. Add css to the page:

ion-app._gmaps_cdv_ .nav-decor {
    background-color: transparent !important;
}

1. Add to you html file beside of the Google Maps implementation.
   Inside of ion-header after ion-title.

<ion-buttons end>
  <button ion-button icon-only (click)="chooseMapType($event)">
    <ion-icon name="settings"></ion-icon>
  </button>
</ion-buttons>

1. And your typescript beside of the Google Maps implementation.

chooseMapType(event: Event) {
  let actionSheet = this.actionSheetCtrl.create({
    title: 'Map Type',
    buttons: [
      {
        text: 'Normal',
        handler: () => {
          this.map.setMapTypeId(GoogleMapsMapTypeId.NORMAL);
        }
      },
      {
        text: 'Satellite',
        handler: () => {
          this.map.setMapTypeId(GoogleMapsMapTypeId.SATELLITE);
        }
      }
    ]
  });

  actionSheet.present();
}

1. Try to click on "Normal" and see it doesn't work. Because the map touch event is dominant / overlapping.
   Click on "Satelite" and see it works, because the map is not overlapping on this position.

Is there a workaround to place the touch element of Google Maps behind and not always on top?

I found an issue for ionic at github. It's closed because "This is not an ionic bug".
https://github.com/driftyco/ionic-native/issues/1024

[wf9a5m75]

Use the plugin v2 instead of the ionic wrapper.

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/For-ionic2-users/README.md

[wf9a5m75]

Also read here.
https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/1452#issuecomment-302124078

[domske]

Thanks @wf9a5m75 I will check this out. Using v2 of this plugin, switch to JS API or workaround on v1.

[wf9a5m75]

ping

[georgski]

I came across this problem and tried using v2, but the results were the same. In my case the sidebar buttons overlapping the map are not working - the touch events are handled by the map. I've integrated the plugin according to the these instructions:
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/For-ionic2-users/README.md

[wf9a5m75]

@jleszczynski Please create an example project, and share it to me on github or bitbucket.
Then I will check it.

[shaneparsons]

@Dominik-Andreas-Geng @jleszczynski putting the button inside the map div fixed it for me.

[wf9a5m75]

@jleszczynski ping

[kozuch]

Same problem here - I am not able to make an onclick work on an overlapping element on plugin v1.4. It does not matter whether I put my element INSIDE the map DIV or just after it. :( Tried both static HTML onclick definition and dynamic attachment via jQuery attr. Can someone fix this?

UPDATE: My sorry, the onclick works on single elements right after the map DIV. However, when I place elements inside the map DIV, the do not move with map, but I dont mind that (because I do not need that functionality).

[wf9a5m75]

Since there is no update for a while, I close this issue.

One thing, if you face this problem with ionic3, you may resolve this issue with reinstall the latest plugin.