I have an Ionic Capacitor app that utilizes multiple google maps in different pages, my problem is that in android i had to set Ion-content to transparent in order to see the map, but because i did that now when i go to a new page that has another map i can see that the maps are on top of each other. I tried to destroy the map before leaving the page but i think since im using ion-router then the map is not really getting destroyed but it is getting cached.
2 Likes
Hello
Did you ever get any where with this.
I have a similar issue and the only way i have made it work is by removing the page animation time to ZERO… so the contents below the webview cannot be seen.
I love how nobody ever answers questions in this forum. So, I know this is late but let be contribute. Using the native (community) library for the maps does cause this issue in which you have to deal with this mapview getting mixed with the webview… So my solution was to use a web version for the app… for react I used react-vis and then I was able to have multiple maps (map views, mini-maps) around my entire app.
Try using a web version library, like the one you would use if developing a website.
Hi
Thanks for answering.
Previously i had used the cordova google maps plugin, but since going to ionic / capacitor the google maps one is terrible.
I was hoping to keep it all within ionic / capacitor, but you may be correct and a web version would simplify the process and work better
1 Like
As a caveat to this, maybe it has changed since the last time I looked, doesn’t Google charge for the web version whereas the native version they don’t?
Yes… I couldn’t find a better solution. Google has a free tier of 28.500 map loads per month. How do you deal with this on your end?
1 Like
My app doesn’t have any type of map integration. I just wanted to mention the caveat. Obviously, if the native plugin doesn’t work for your needs, then you would have to use a paid web option 
IMO, here’s a better alternative than capacitor google maps:
the official Angular google maps component: components/src/google-maps/README.md at 7136c20c25b2243521aa0d1abbd945f408433baa · angular/components · GitHub
1 Like
Thanks all,
i have swithced to the javascript google maps as it works without any issue.
its been so long since i visited this topic but yeah i just switched to the main javascript google maps since no one replied here, but i was checking angular google maps and that might be a good solution as well dependinhg on your needs
there are free map solutions if you want to use them for simple stuff like just displaying a mini-map. Checkout leafletJS