注意！ この記事はQiitaにて公開されていた内容をimportしたものです。
これらの内容は場合によっては陳腐化していて役に立たなくなっていたり、有害であったり、現在の著者の主張と異なることがあります。
皆様の判断の上でご利用いただけますと幸いです（度を超してヤバいものは著者に連絡して頂ければ対応します m(_ _)m）

問題

以下のPlunkerのような、タブの中に地図（GoogleMaps）が貼り付けてあるような構成を作りたいとする。

• タブのなかにGoogleMap(Bad…)

上のサンプルでは、地図が半分以上が描画されていないはずである。これをなんとか解決したい。

FAQに書いてあった

あれこれググったが、AngularGoogleMapsのプロジェクトサイトのFAQに答えが書いてあった。

• My map is only partially rendering!

ざっくり書くと、「ng-showみたいなのじゃなくてng-ifつかってDOMの削除・挿入を使え」とのこと。

対策

• タブのなかにGoogleMap(Good!)

<tab heading="Map(After)" select="ctrl.show = true" deselect="ctrl.show = false">
  <div ng-if="ctrl.show">
    <h1>Fixed map page</h1>
    <ui-gmap-google-map center='ctrl.center' zoom='ctrl.zoom'></ui-gmap-google-map>
  </div>
</tab>

UI Bootstrapのtab directiveのselectおよびdeselectでshowフラグをON/OFFし、 tabの子要素のdivタグのng-ifでDOMの出し入れを行う。

そんな感じで修正しましたが、どうもバッドノウハウな気がしなくもない。。。

余談: controller-asな感じでController定義してるのでctrl.***という形になっているが、 controller-asで書いてない($scopeで書いている)ならばctrl.は削除すること