jQuery MobileでGoogleMapはキャッシュに注意?

jQuery MobileでGoogleMapを利用するサンプルの作成をしていた時にはまったのでメモ。

1つのHTMLファイルに複数ページを記述するのではなく、PHPで1ページ分出力する方法で試していた。

大きな流れとしては、
1.ページAで入力し、フォーム送信
2.PHPでページAの内容を処理し、ページBを出力
3.ページBでGoogleMapを表示

このときの3.ページBを表示したときにGoogleMapが枠だけで地図が表示されない。

リロードすれば表示されること、PHPで出力しているからではないことは確認した。
jQuery Mobileを適用しなければ同じコードで問題なく表示される。
やはりjQueryMobileの設定らしい。

ググってjQuery Mobileとajaxのからみとかも試してみたが変わらず。
ふとjQuery Mobileに関するセミナーで「キャッシュが強力」というようなフレーズを聴いたことを思い出す。

GoogleMapを表示するページ定義のDIVに
data-dom-cache=”false”
を追加することで解決した!

1日ハマっていたけど、解決策が見つかってひと安心。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*