Angular/Ionic Framework Google Maps mit Tabs

Question

Ich habe auf diesem für 2 Tage festgefahren. Hoffentlich kann mir jemand ein wenig helfen oder mich in die richtige Richtung lenken.

Ich verwende ionic Framework und Ion-Tabs für eine Listing-Seite, eine Registerkarte zeigt die Beschreibung eine andere ist eine Karte der Lat/Lon laden ich von Json.

Ich kann Google Maps in der zweiten Registerkarte nicht laden. Es wird gut in der ersten Registerkarte oder der ersten Ansicht geladen. Ich denke, das liegt daran, dass das Karten-Div in der Tab-Ansicht ausgeblendet oder nicht gerendert ist.

ich für Bootstrap erinnere hatte ich dieses Problem mit Tabs und hatte eine Arbeit um so etwas wie

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

^die im Grunde inits der Karte zu tun. Wie geht das mit Ionen?

Grundsätzlich muss die Karte in die zweite Registerkarte geladen werden, wenn sie eingegeben wird.

Ich habe einen Codepen unterhalb erstellt Sie können sehen, es lädt gut zu Hause, aber über es nicht laden. Für ungefähr Ich rufe MapCtrl

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

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

Irgendwelche Vorschläge oder Hilfe würde in sehr geschätzt.

Answer 1

Ich denke, die Art, wie ich den Controller anruft, war das Problem. Wenn jemand ein ähnliches Problem hat, unten ist was ich getan habe.

zugewiesen ich einen separaten Controller für Karten (zB MapCtrl und dann wie aus dem Register genannt.

 <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()"> 

Wenn Sie Karten auf einem iOS-Simulator zu testen und einen leeren Bildschirm Sie Sie sicherstellen, erhalten müssen Whitelist die Google-Skript-URL auch.