Android 15 - Edge to Edge margins cause map to render incorrectly

[DGeoWils]

Bug Report

Map does not render on it's element correctly on Edge to Edge devices when edge to edge support is enabled. More importantly, touch events are not dispatched to the right locations on these devices.

Plugin(s)

@capacitor/google-maps: "^7.0.3",

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 7.4.2
  @capacitor/core: 7.4.2
  @capacitor/android: 7.4.2
  @capacitor/ios: 7.4.2

Installed Dependencies:

  @capacitor/ios: not installed
  @capacitor/cli: 7.4.2
  @capacitor/core: 7.4.2
  @capacitor/android: 7.4.2

[success] Android looking great! 👌

Platform(s)

Android only

= Android 15

Current Behavior

On Android 15, a solution is required to handle edge to edge devices, otherwise the application overflows onto the status bars and looks broken. Currently the two solutions I have seen are 1. CapAwesome Edge-to-Edge
2. Setting a config option in capacitor.config.ts (adjustMarginsForEdgeToEdge: 'auto')

When using either of these options, the capacitor-google-maps plugin renders the map with an offset on the bottom. This causes styling issues, and touch effects are not dispatched to where they are expected.

maps-1.mov

Expected Behavior

Map should render without the margin on the bottom when edge to edge is enabled.
Users touches should be registered at the location the user touched instead of above.

See below (adjustMarginsForEdgeToEdge commented out)

maps-2.mov

Code Reproduction

This was tested on a Pixel 9 Emulator

1. Clone the repository here: https://github.com/DGeoWils/capacitor-google-maps-minimal-example
2. Add an API key to your AndroidManifest.xml
3. Run the sample app - this will start with adjustMarginsForEdgeToEdge enabled. You can see the map working correctly by commenting this option out in capacitor.config.ts

Other Technical Details

Additional Context

[eHeinrich-wsa]

Is there a workaround?

[DGeoWils]

If you are using Ionic, I seem to have had success using this package https://github.com/capacitor-community/safe-area

The current release (v7.0.0-alpha.1 from January) does not work correctly. There are additional fixes in the master branch - so if you clone the repo, build it following instructions in their contributing guidelines (https://github.com/capacitor-community/safe-area/blob/master/CONTRIBUTING.md) and then use npm link to pull the package in to your project.

You also have to remove the the @capacitor/status-bar plugin if used per capacitor-community/safe-area#52

This plugin works by simply updating the ionic safe area css variables instead of seemingly adding padding to the native webview elements, so it does not affect the map rendering like CapAwesome Edge-to-Edge and adjustMarginsForEdgeToEdge: 'auto'

Good luck!

[OS-pedrogustavobilro]

Hey @DGeoWils, from what I checked here, this issue has been solved with the latest versions of Capacitor and Ionic Framework.

Tested with your example app on an Android 16 device. The markers seem to be placed correctly now.

Are you able to update to Capacitor 8?

pixel_android16_cap8.mp4

[DGeoWils]

Hi @OS-pedrogustavobilro ,

I was able to run the example app using Capacitor 8 on an Android 16 device. The map and markers rendered correctly. I am not sure if this is just because the 'adjustMarginsForEdgeToEdge' option was removed (per: https://capacitorjs.com/docs/updating/8-0#breaking-changes-in-capacitor-config-file). The map rendered correctly on Capacitor 7 with that option disabled.

I still need to do some testing around devices running Android <= 14.

[OS-pedrogustavobilro]

The way edge to edge is handled in Capacitor 8 has changed, basically the inset values come via CSS environment variables, that either come from the browser or from the new SystemBars plugin part of @capacitor/core. Then, the ionic framework consumes these variables.

In apps for Android <= 14, that are not edge-to-edge, should behave the same as before (Capacitor 7), but yeah feel free validate if everything works with Capacitor 8, and let us know if you run into any troubles!

[OS-pedrogustavobilro]

@DGeoWils I'll be closing this issue. Since you did not report back, I'll assume it is working as well for Android <= 14 for you; from our tests everything's working now.

If anyone is still having this issue in the latest plugin version, feel free to re-open the issue and share any relevant details - including a GitHub repo for a sample app where we can reproduce the issue (since in the one provided above, the issue is solved).

Thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the plugin, please create a new issue and ensure the template is fully filled out.