How to Use Capacitor Google Maps Plugin with Ionic 7 Modals

Question

No matter how much I try to hide HTML elements, make them transparent, not visible o not display them at all, I haven't found a specific way to make the HTML elements transparent enough to use Capacitor Google Maps plugin effectively using Ionic / Angular. Specifically I need to create a modal that opens up to select your current location on a map, the location picker works perfectly on iOS or Web, but I simply cannot hide enough items in Android for the map to display correctly.

I have found, through web debugging on Chrome, the culprits, but I have tried to set their background to transparent, visibility to hidden, or anything but it does not work.

I don't think I am the only one that needs to have a:

1. Tabbed App
2. Using a Modal
3. Display the map in a modal

These are the elements i cannot hide:

<div role="dialog" aria-modal="true" class="modal-wrapper ion-overlay-wrapper" part="content">
 <slot>
 </slot>
</div>

<div class="inner-scroll scroll-y" part="scroll">
<slot></slot>
</div>

Does anyone know a correct way of hiding everything inside a modal and have it work? This is the modal I am trying to show in Android:

when using Chrome DevTools while inspecting the app, I can set the style to "background-color: transparent !important" and automatically I can see the map, but for the best of me I cannot change the class, add a new class, change the style before the map is loaded using the classList function, or anything.

Answer 1

After much trial and error, I think this works with the following:

1. set css height to a pixel height on the container element of the capacitor-google-map component (in my case an ion-content element inside an ion-grid)
2. set css position: static !important on the capacitor-google-map component

This seemed to fix the problem with displaying a google map in a modal page using Ionic 7 with Angular and Capacitor 6.

Answer 2

Try this in your style file (e.g. style.css):

body {
  background: transparent;
},
ion-content {
  --background: transparent;
}