Google Map as Native its not working with modal but its working as component with same page

Google Map as Native its not working with modal but its working as component with same page

I’m making a wild guess, but this probably has something to with the transparency settings. Google Maps native runs underneath your Ionic application, which requires to set all the backgrounds transparent to actually see the Google Maps. Probably this isn’t done on the modal when stacking a modal on top of a page.

1 Like

@luukschoen ya i am also finding that transperancy issue , while loading modal it loads header of page ,
but now showing ion-content area and map not going to display.

So, what i consider its not possible to show map in modal page

What if you build to your device, open up the inspector and manually set every background you can find to transparent? Does it show up then?

@luukschoen you mean i have to change it with color or may i keep it transparent ?

No I mean you should live debug on the device, open the chrome inspector, inspect the elements and set all of them to transparent by hand to find out which one is actually causing the map from not being displayed. Or come to the conclusion that it’s not the background transparency that prevent’s your map from showing, but something else.

When i faced that an element is not shown i realized that i had to embed in an ion-content sometimes twice. If the ion-content was missing then i have ended up not seeing the component or seeing only the header of the modal page.

In the case of google map it was also the case.

@luukschoen thanks man, your help is very useful for me i am just approx to get once i get i will update the class name