[ 解決済 ] GoogleMapが表示されなくなりました

[shingo]

以前、Bootstrap4のタブメニューの利用が出来る事を確認して、タブメニュー切替でGoogleMapを表示していましたが
最近、タブメニューでコンテンツは切り替わっているのですが、GoogleMapが表示されなくなりました。
ただし、タブを切り替えた際にそのままであればGoogleMapは表示されませんが、パソコンであればウィンドウサイズを動かすと表示されます。サイズを変更してGoogleMapが表示された後、Activeになっている最初のタブメニューに切り替えてもGoogleMapは表示されなくなりました。
スマートフォンでは画面をタブメニュー切替ご画面をスクロールすると表示されますが、スクロールしなければGoogleMapは表示されませんでした。
Bootstrap4の機能では表示されるのを確認したのですが…。
画面サイズを変更しなくても表示できる方法があれば教えていただきたくお願いいたします。

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[石川＠Vektor,Inc.]

外観 > カスタマイズ > CSS最適化設定 の TreeeShaking や CSS Preload をオフにしてみてください。

[shingo]

“外観 > カスタマイズ > CSS最適化設定 の TreeeShaking や CSS Preload をオフにしてみてください。”

上記の設定をオフにしてみましたが、変わりませんでした。

[石川＠Vektor,Inc.]

おそらくGoogleMapの仕様上の問題なので以下の手順をお試しください。

1. 恐らくHTMLブロックで Google Map を埋め込んでいると思いますが、その iframe のタグにclass名を追加

例

<iframe class="my_google_map"

2. 外観 > カスタマイズ > 追加CSS に

iframe.mt_google_map { height:400px }

[shingo]

ご回答頂きましたスタイルシートの設定で解決できそうです。
ただ、追加CSSでのタブレットとスマートフォン用記載方法がわからないので
子テーマのスタイルシートで対応しようと思います。

ありがとうございました。

[投稿者]

投稿