『Advanced Custom Fields』とjQuery UI Tabsを使用したGoogleMapの表示
-
いつもお世話になっております。
現在『Advanced Custom Fields』の「GoogleMap」機能を使ってMapを表示しています。
しかし、jQuery UI Tab内にGoogleMapを設置すると表示が崩れる現象が起こっております。
【参考画像その1】
http://fast-uploader.com/file/6988941856615/どうやらUI Tabの選択されていないタブを非表示にする際に使われる「display:none」が良くないらしく下記のようにCSSを変えてみました。
.ui-tabs .ui-tabs-hide { position: absolute; left: -10000px;}
するとどうでしょう・・・
【参考画像その2】
http://fast-uploader.com/file/6988942509153/中心位置が左にずれ、半分だけ表示されるようになりました。
※ちなみにleftの数値を変えたりtopやrightにしてみたりしましたが表示は変わりませんでした。
色々調べてみるとGoogleMapというよりGoogleMapAPIとjQueryUITabの組み合わせで起こる問題の様です。
GoogleMapAPIとjQueryUITabの関連記事はたくさん見つかるのですが、『Advanced Custom Fields』の「GoogleMap」機能とjQueryUITabの対処法はどこにも見つからずここで質問させて頂きました。
言葉足らずで申し訳ありませんが、何か対策法をご存知の方がおりましたらご協力の程よろしくお願い致します。
【補足】
■使用しているjQueryUITab
http://5am.jp/jquery/jquery_ui_tabs/
※デフォルトを使用■『Advanced Custom Fields』の「GoogleMap」表示の際に参考にしたサイト
http://miukro.hatenablog.com/entry/2014/09/14/183633■実際に問題の起きているページ
http://choice-web.net/test/archives/shop/124
- トピック「『Advanced Custom Fields』とjQuery UI Tabsを使用したGoogleMapの表示」には新たに返信することはできません。