モバイル機器でGoogle Mapsを表示する場合、初回のロードにはそれなりに時間がかかる。そのため、地図に対して何かを行ってもエラーになったり、うまく反映されない場合がある。例えば、今回は以下の問題に遭遇した。
・地図をロードしてマーカーを表示しようとするとエラーが発生
→ 地図の初期化が完了する前にマーカー表示処理を実行してしまうため。
・地図の中心を指定座標に移動しても正しい場所に移動しない
→ 表示途中の状態で中心を移動するため。(推測)
1番目の問題は、地図オブジェクトを早めに準備しておくことで対処できる。(地図を含むページを表示するタイミングで地図オブジェクトを生成＆マーカーを表示しようとすると、生成が完了する前(＝地図オブジェクトがnullの状態)にマーカーをセットする可能性がある。そこで、地図ページを表示する/しないに関わらず、もっと早いタイミングで地図オブジェクトだけを生成しておくことで回避できる。ただし、この方法は最初のページで地図を表示したい場合はうまくいかない。)
2番目の問題については、Google Mapsのidleイベントを使う方法がある。ロードが完了したタイミングでこのイベントが発生するので、1回だけ実行するイベントハンドラ(addListenerOnce)を併用するとうまくいく。
// JavaScript
$.mobile.changePage($('#pgSpotMap')); // ページ遷移後に地図を(再)表示する
displaySpotOnMap(curPlan, '/images/icon/mm_20_purple.png', '/images/icon/mm_20_shadow.png');
// 地図の中心を移動・・・普通にやるとうまくいかないので以下のようにする
google.maps.event.addListenerOnce(gMap, 'idle', function(){
gMap.setCenter(new google.maps.LatLng(curPlan.spot_lat, curPlan.spot_lng));
// do something only the first time the map is loaded
});