WordPressサイトでアコーディオンを利用してのGoogle Maps表示ができません
-
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の知識が浅く、問題の根本解決というよりは、検索して調べたアコーディオンのソースやプラグインなど、いろいろ試してみましたが、そもそもショートコードの内容を表示できないというのも多く、上記のソースが一番まともな表示でした。自力では難しいと思い、テラテイルにて何かヒントでもつかめればと思っております。
ご助言いただけると大変助かります。
よろしくお願いいたします。
- トピック「WordPressサイトでアコーディオンを利用してのGoogle Maps表示ができません」には新たに返信することはできません。