带有选项卡的Angular / Ionic Framework Google Maps

Question

I have been stuck on this for 2 days. Hopefully someone can help me out a bit or point me in the right direction.

I am using ionic framework and ion-tabs for a listing page, one tab shows the description another is to load a map of the lat / lon I get from json.

I cannot get google maps to load in the second tab. It will load up fine in the first tab or initial view. I think it's because the map div is hidden or not rendered when in tab view.

I remember for bootstrap I had this issue with tabs and had to do a work around something like

 $("a[href='#maptab']").on('shown.bs.tab', function(){
     mapInitialize();
 }
 });

^ Which basically inits the map. How to do this with ionic though?

Basically, I need the map to load into the second tab when entered.

I created a codepen below you can see it loads fine on home, but on about it doesnt load up. For about I am calling in MapCtrl

 <ion-tab title="About" icon="ion-ios-information" href="#/tab/about" ng-controller="MapCtrl">

https://codepen.io/anon/pen/zBWJzw

Any suggestions or help would be appreciated.

Answer 1

I guess the way I was calling the controller was the issue. If anyone has a similar problem, below is what I did.

I assigned a separate controller for maps (eg MapCtrl and then called it from the tab like.

        <ion-tab title="Map" icon-on="ion-earth" icon-off="ion-earth">
            <ion-nav-view name="tab-map">
                <ion-content ng-controller="MapCtrl" ng-init="initialize()">

If you are testing maps on an iOS simulator and get a blank screen you need to make sure you whitelist the google script url as well.