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の知識が浅く、問題の根本解決というよりは、検索して調べたアコーディオンのソースやプラグインなど、いろいろ試してみましたが、そもそもショートコードの内容を表示できないというのも多く、上記のソースが一番まともな表示でした。
自力では難しいと思い、テラテイルにて何かヒントでもつかめればと思っております。
ご助言いただけると大変助かります。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー