Multiple google maps in Cordova page-like app

Question

I'm developing mobile application based on Cordova with main purpose of displaying and picking location from Google maps. Application is designed to be Page like, so every page has 100% height & width and navigation buttons Next & Back. Every page should have map inside, but this is problem, becouse i can have only one instance of Google maps. How could i solve this? I had two ideas:

1. Use Static Maps API and create temporary overlay on map-canvas div on every page. This bring user fealing of swiftness. When user click on next, next page slide up and he should see map image from API. Div behind overlay will be replaced for interactive Google map.
2. Use some kind of loading screen. This isn't good solution for me, becouse of UX. User lose feeling of swiftness.

Is there any other solution?

Answer 1

How about keeping your map on a single <div> that is separate from the page and always stay on top as long as there's a "page" that needs it (e.g. by splitting the page and the map into two Angular controllers and using events on the root controller to synchronise them)?

Another solution is, because the pages sound similar with their navigation elements, that you change the loading logic and only change the contents rather than loading a full page each time.

Otherwise, if google maps isn't a requirement, I've already built an Angular page-based app with multiple maps using Leaflet.js and it works perfectly fine.