jQuery mobileのcollapsibleにGooglemapsとか

PCとスマホで表示を分けるわけですよ、画面の大きさ違うからね。
でも、ページ長い→スマホはメンドイってーことで、jquerymobile（jqm）のcollapsibleつー開閉パネル的なUIを導入。

そこまでは大して問題なくだったんだけど、開閉パネル内に設置した地図（Googlemaps　API　V3）の表示がおかしい訳で。
設定してある地図の中心が左上にあるみたいな。
で、調べてみたらばgooglemapsがV3になってから「display:none」のとこに表示させようとするとそーなるよってことらしく。
collapsibleはコンテンツ部をdisplayで制御してるみたいなソースだったのでコレかなーと。

解決策としては、

1. noneする前に描画する→noneする
2. イベントをトリガーにして再描画

どちらかが多いみたい。多分他にも多分にあると思われるけど・・・
で、jquery的な（？）アプローチを取ってみたかったので2でいってみることに。

以下参考URLデスよ

• http://blog.zaq.ne.jp/oboe2uran/article/690/
• http://c-brains.jp/blog/wsg/11/11/08-161217.php
• http://api.jquerymobile.com/collapsible/#event-collapse
• http://stackoverflow.com/questions/6412488/googlemaps-v3-checkresize-function

順序としては、パネル閉じた状態（地図無し）でスタート→パネルクリックで開く。
開ききったら（多分）地図描画

var map = new google.maps.Map(document.getElementById("mapwrite"), mapOptions);
$('#map').on('expand',function(){
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
});

onはbindとかの例多いけど、新しいから使ってみた（ｗ
liveはjqmの1.9.1で削られたそうな。
expandはcollapsibleのイベントで、開いた時?みたいな。
latlngは座標デスね

まだまだ知らないことばかりでございます・・・

[amazonjs asin=”4774149829″ locale=”JP” tmpl=”Small” title=”jQuery Mobile ポケットリファレンス”]