When page animation is used, scroll/tab events are passed through to the bottom page on which Google Maps is


I know this is strange, but let’s say I have Page1 and Page2. Google Maps is on Page1. When I used page transition animation to push Page2 in Page1, if I scrolled and tapped on Page2 right after the transition, Page2 did not get the events but it seemed that the Google Maps on Page1 got them. So, when I pressed the back button to go back to Page1, the Google Maps was scrolled and showing weird places, or caused the marker-clicked event.

That was when I used the in-built “forward”, “backward” animation (i.e., sliding animation). At first I thought it was because Page1 was moved. So I created a custom page transition, and only moved Page2, However it still happened. When I scrolled right after the transition, Page2 did not get it, but Google Maps got it.

I thought probably the opacity animation (which is the default) on Page2, so I removed the opacity animation (only the slide animation is left), but it still happened.

How to fix this problem? Since the Github page says that Google Map plugin works by creating a hole on the page and placing a native Google Map beneath the page, I think I need to inform the plugin that it should close the hole right before the navCtrl.push() starts.


I have tried this. It did seem to alleviate that weird event bug, but it often caused a delay (blank -> flickering -> Google Map shows) when coming back from Page2 to Page1. Is there a better solution?

ionViewWillEnter() {
if (this.map != null) {

ionViewWillLeave() {
if (this.map != null) {


Use the latest multiple_maps branch code.