jquery - 代替ルートを選択するとズームが縮小します

Question

Google Maps API v3 と jquery mobile を使用しています。tab1 がルート付きの地図を表示し、tab2 がルートの詳細 (setPanel) を表示するページがあります。応答のために setDirections を呼び出すと、すべてがうまく機能します。地図は中央に配置され、ズームも正確です。詳細に移動して別のルートを選択し、Tab1 を押してマップに戻って新しいルートを表示すると、ズームがオフになります。なぜこれが起こるのですか？それを機能させるために何かできることはありますか？

Answer 1

地図が表示されていないときに道案内が (代替ルートに) 変更されると、間違ったサイズになります (地図が非表示の場合、そのサイズは API にゼロとして報告されます)。マップが表示された後、マップ上で「サイズ変更」イベントをトリガーする必要があります。

ドキュメントから：

resize - 開発者は、div のサイズが変更されたときにマップ上でこのイベントをトリガーする必要があります: google.maps.event.trigger(map, 'resize')。

更新: マップが非表示で境界が設定されていない場合、direction_changed イベントは発生しないようです。マップが表示されているときに境界を手動で設定するとうまくいくようです。

function refresh(map) {
  google.maps.event.trigger(map, 'resize');
  var routeIndex = globVars.directionsDisplay.getRouteIndex();
  var routes  = globVars.directionsDisplay.getDirections().routes;
  globVars.map.fitBounds(routes[routeIndex].bounds);    
  alert('resize');                    
}

jsfiddle