jQuery Mobile アプリに埋め込まれた Google マップがあります。iPhone でマップを表示し、infoWindows をクリックすると、次のような動作が得られます。
- マップを左にパンする必要がある infoWindow をクリックすると、infoWindow の右側が画面の右側から外れます。
- マップを右にパンする必要がある infoWindow をクリックしても、同じ問題は発生しません。
すべての情報ウィンドウのサイズは正しく設定されていますが、マップが正しい位置にパンされていません。次のコードを使用してマップを配置しています。
<style type="text/css">
.page-map, .ui-content, #map_canvas { width: 100%; height: 100%; padding: 0; }
#map_canvas img{max-width:none};
.content-primary, #map_canvas { height: 100%; min-height: 100%; }
</style>
<div data-role="page" data-theme="b" id="mappage" class="page-map" style="width:100%; height:100%;">
<div data-role="content" class="fullHeight">
<div id="map_canvas"></div>
</div>
</div>
マップを左にパンさせるマーカーをクリックしたときに、infoWindows を正しくパンする方法を理解する必要があります。