サポート » 使い方全般 » WordPressサイトでアコーディオンを利用してのGoogle Maps表示ができません

  • masag 3

    (@iichiro-hotta)


    Wordpressで作成中のサイトで、Google Mapsをページ中に表示させようと思っています。
    単純にそのまま表示させるのではなくて、jQueryを使ってアコーディオンにしまして、
    最初は閉じた状態ですが、バーを押すとアコーディオンが開き、Google Mapsがそこに表示される
    ようにしたいと思っています。

    ◆発生している問題・エラーメッセージ
    アコーディオンを開いたときに、Google Mapsが表示されません。Google Mapsの表示部分がグレー一色で、右下に辛うじてGoogle mapsの人アイコン、利用規約が出ている状態です。左右に動かすとマーカーがチラチラっと見えるような状況です。
    ただし、その状態で右クリックでソース検証を開いたり、ブラウザを縮めたりするとGoogle Mapがその動作を機にパッと表示されます。
    力不足は申すまでもなく、なぜ最初から表示されないのか原因がわかりません。

    ◆該当のソースコード

    ソースを以下に転記します。

    <script>
    jQuery(function($){
    $(“#acMenu dt”).on(“click”, function() {
    $(this).next().slideToggle();
    });
    });
    </script>

    <style>
    #acMenu dt {
    display:block;
    width:auto;
    height:50px;
    line-height:50px;
    text-align:center;
    background: none #633b53;
    cursor:pointer;
    color: #fff;
    }
    #acMenu dd {
    width:auto;
    display: none;
    }
    </style>

    <dl id=”acMenu”>
    <dt>Maps</dt>
    <dd>[bgmp-map]</dd>
    </dl>

    [bgmp-map]はBasic Google Maps Placemarksというプラグインで設定した内容のGoogle Mapsを表示させる
    ショートコードです。

    ◆試したこと
    Javascriptの知識が浅く、問題の根本解決というよりは、検索して調べたアコーディオンのソースやプラグインなど、いろいろ試してみましたが、そもそもショートコードの内容を表示できないというのも多く、上記のソースが一番まともな表示でした。

    自力では難しいと思い、テラテイルにて何かヒントでもつかめればと思っております。
    ご助言いただけると大変助かります。
    よろしくお願いいたします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • Google Mapは表示する際に表示領域を計算して描画データを返しているのではないでしょうか。
    表示されていない状態では表示領域がないので描画データも取得されないと思います。

    検証を開くと画面がリサイズされるので Google Mapは再描画され、表示されるのだと思います。

    長々と書きましたが、答えはこちらのサイトの「display:noneからの表示」に書かれているようにされたら表示出来ると思います。

    トピック投稿者 masag 3

    (@iichiro-hotta)

    ご助言ありがとうございます。
    参考サイトを見て自分でやってみます。
    取り急ぎ貴重な情報をありがとうございました!

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「WordPressサイトでアコーディオンを利用してのGoogle Maps表示ができません」には新たに返信することはできません。