Passing events through ion-page to global map?

Ionic Framework ionic-v3
1

I have an app that has a fullscreen Google Map in the background of all pages (currently as a component in app.html).

The problem I’m facing is that the ion-page components are overlaying the map and preventing the user from being able to pan or zoom etc.

I see a few possible options here:

  • Use pointer-events CSS property to pass events through the ion page
  • Find some way to move the components of the page outside the page component. I’m not sure if there’s an Ionic/Angular way of doing this?
  • Don’t render in ion page component, and instead attach all of its child components directly to the app component. Again, I don’t know if this is possible in Ionic?

Any suggestions or experience here would be appreciated.

Thanks