After installing a fresh ionic app with ionic start, select vue and sidemenu.
Install capacitor google maps like stated in the docs.
When creating a map, the map will appear properly and everything works, but when opening an ion-modal component, the map underneath will turn blank with a horizontal overflow that is scrollable. After that point the only way to fix it is app restart, but the modals will still not work with the map.
The only solution I found so far is to teleport the map and all the modals out of the project structure into the body, but this will cause a bunch of other problems like elements being under the map or animation issues.
Capacitor Version
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/cli: 6.1.0 @capacitor/core: 6.1.0 @capacitor/android: 6.1.0 @capacitor/ios: 6.1.0
[success] iOS looking great! 👌 [success] Android looking great! 👌
Other API Details
Platforms Affected
Current Behavior
When an ion-modal opens on iOS while the map is active, the map will be unusable until app restart.
Expected Behavior
The map should be visible and usable after an ion-modal opens or closes.
Project Reproduction
https://github.com/Garmagon/bug-capacitor-google-maps-modal
Additional Information
After installing a fresh ionic app with
ionic start
, selectvue
andsidemenu
.Install capacitor google maps like stated in the docs.
When creating a map, the map will appear properly and everything works, but when opening an
ion-modal
component, the map underneath will turn blank with a horizontal overflow that is scrollable. After that point the only way to fix it is app restart, but the modals will still not work with the map.The only solution I found so far is to teleport the map and all the modals out of the project structure into the body, but this will cause a bunch of other problems like elements being under the map or animation issues.