GoogleMapの画面サイズを動的にブラウザ一杯に表示したい時の対処法

ねむたーい。ねむたーーい。
というわけで引き続きGoogleMapネタです。

GoogleMapの画面サイズを幅一杯に広げる時に困ったのでメモしときます。
どういう事かというと、

<div id="map-canvas" style="width: 400px; height: 400px;"></div>

とGoogleMapを横幅400px以内に表示してて、
jQueryを使ってあるボタンが押され時にGoogleMapをブラウザサイズ一杯に広げて表示したかったわけです。
こんな風に。

$(function () {
  $('hoge-btn').click(function() {
    $('#map-canvas').css({'width': '100%', 'height': '100%'});
  });
})

すると、こんな感じになってなぜか画面一杯に広がらない。。。

これは困った。。と悩んでいて検索すると、

google.maps.event.trigger(map, 'resize');

というeventをハケーン。
mapというのはnew google.maps.Map(document.getElementById("map-canvas"))の事ね。
というわけで、早速

$(function () {
  $('hoge-btn').click(function() {
    $('#map-canvas').css({'width': '100%', 'height': '100%'});
    google.maps.event.trigger(map, 'resize');
  });
})

としてみると、、、

無事に表示されるようになりました。

いやぁ一時はどうなるものかと思いましたよ。良かった良かった。