jQuery mobileのイベントについて考えてみた

Pocket
[`evernote` not found]

昨日公開した記事のgooglemapですが、どうも最初の読み込み時にうまく表示されていません。
リロードすれば表示されるようになったりするのですが、気持ち悪いです。

あまりに気持ち悪いので原因を調べてみました。

解決法:googlemapを表示するコードを実行するイベントをpageshow()に変える

DEMO

$(document).ready(function(){
   $('#map').bind('pageshow',function(){
      var latlng = new google.maps.LatLng(36.238874,137.968613);
      var options = {
         zoom: 15,
         center: latlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById('map_canvas'), options);
      var pageHeight = $(document).height();
      $('#map_canvas').css('height',pageHeight);
   });
});

たぶん、実行のタイミングに問題があるんだと思います。
初期化系のイベントで試したところ、どれも同じような感じでした。
それに対して、pageshowだとうまくいくんです。

DEMO(地図の表示テストをご覧ください)

実際の実行順でいうと
pagebeforecreate→pagecreate→pageinit→pageshowとなっています。

DEMO(イベントの実行順をご確認ください)

ちなみに、pageshowは、ページ遷移のアニメーションの完了後(=ページが完全に表示されたら)実行されます。

googlemapはコードの一番下に書いた方がいいよみたいなおまじないがありましたが、それはおそらくページの読み込みが完全に終わってから実行しないとうまく表示できないからだと思いますが、今回の例も同様で、pageshow=ページが完全に表示されてから実行しないとだめということかな。

なんとも歯切れの悪い説明で申し訳ありませんが、ノウハウとしてjquery mobileでgoogle mapを扱う際には、pageshowで実行すると覚えておいたほうがいいかもしれませんね。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。