Google Map disappearing when updating the DOM

[alexp25]

Bug Report

I finally found out why the map disappeared after some time on iOS. It seems to be related to dynamically adding a new element to the page where the map is created. Could someone explain why would that happen? Would the map binding break or how can this be avoided?

Plugin(s)

Google Maps

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

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

Installed Dependencies:

  @capacitor/android: not installed
  @capacitor/cli: 5.0.0
  @capacitor/core: 5.1.1
  @capacitor/ios: 5.0.0

Platform(s)

iOS

Current Behavior

The map disappears on iOS, seemingly related to dynamically adding a new element to the page where the map is created.

Expected Behavior

The map should remain visible and functional even after dynamically adding new elements to the page.

Code Reproduction

any example based on ionic angular, having a div with ngIf that is enabled after the map is initialized

Other Technical Details

Additional Context

[alexp25]

So I fixed it, it turns out that the DOM must not be changed around the map element (there should be the same structure), but it didn't prevent me from wrapping the dynamic elements in static divs (and the map no longer disappears). This needs to be added to the documentation though.