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!