Google Maps Not Loading on Multiple Tabs

ionic-v1
1

I am having an issue with an app that I can replicate in a CodePen. The issue occurs when using Google Maps on two different page states. When navigating from one map to another map, the second map does not load. If you navigate from a map, to a non-map page, and then to the other map, the map does load.

Home -> Map 1 -> Map 2 // Does not load map on Map 2
Home-> Map 1 -> Home -> Map 2 // Does load map on Map 2

See the Pen Ionic Google Map on Different Tabs by Joe McFrederick on CodePen.

2

I pickupman, i have the same problem…
exist this way to do… im sure ur maps have the same id…
try to put
for the map 1
in ur controller…

 $scope.map = new google.maps.Map(document.getElementById("map1"), mapOptions);

in ur html page.

<div id="map1" class="map" data-tap-disabled="true"></div>

for the map 2
in ur controller…

 $scope.map = new google.maps.Map(document.getElementById("map2"), mapOptions);

in ur html page.

<div id="map2" class="map" data-tap-disabled="true"></div>

this should work…