サポート » その他 » 『Advanced Custom Fields』とjQuery UI Tabsを使用したGoogleMapの表示

  • 解決済 sudadada

    (@sudadada)


    いつもお世話になっております。

    現在『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

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック投稿者 sudadada

    (@sudadada)

    同じ質問を『teratail』というサイトでさせて頂きました。

    無事にそちらで解決したためこちらのトピックスは閉じさせて頂きます。

    内容は下記URLを参照してください。

    ■【WordPress】プラグイン『Advanced Custom Fields』とjQuery UI Tabsを使用したGoogleMapの表示
    https://teratail.com/questions/10697

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「『Advanced Custom Fields』とjQuery UI Tabsを使用したGoogleMapの表示」には新たに返信することはできません。