wordpressのHTML編集でgoogle mymapsの表示位置を変えたい

Question

前提・実現したいこと

wordpress にgoogle mymapsを貼る時の見た目を編集したいと思っています。google my maps をそのまま貼ると1番上に現れる薄い紺色のヘッダーの部分がつくのですが、見た目が悪いので隠したいです。

発生している問題・エラーメッセージ

HTML初心者なのですが、ネット上で探した方法ではコードエディタを使ってブラウザ上での表示位置を変更するという方法があったのでそれを参考にしました。ソースコードをコピーしてwordpressに貼り付けてみたのですが、うまく表示されませんでした。

ブラウザ上での表示位置を変更する以外の手法でも、google mymapsのヘッダーを消す手法がありましたら、ぜひご教授いただきたいです。

該当のソースコード

以下のコードを、wordpressの「固定ページを編集」＞＞「コードエディタ」の部分に貼り付けました。

<p><style type="text/css"> html{<br /> height:100%;<br /> }<br /> body{<br /> height:100%;<br /> padding:0;<br /> margin:0;<br /> background-color:#888888;<br /> }<br /> ＃main{<br /> height:100%;<br /> min-height:100%;<br /> margin-top:-46px;<br /> margin-bottom:2px;<br /> }<br /> ＃footer{<br /> height:40px;<br /> display:flex;<br /> justify-content:center;<br /> align-items:center;<br /> margin-top:0px;<br /> margin-bottom:0px;<br /> }<br /> </style> </p> <p><iframe src="『gooogle mymapsのHTMLキーはここに入ります』></iframe></p>

#補足情報

wordpress,HTML共に初心者なので質問の仕方に不備がございましたら申し訳ございません。
現在wordpressバージョン5.4.1を使っております。
googlemapsAPIを使わない形で教えていただけたら幸いです。

Answer 1

iframe内には styleを適用できません。また、ご自身で管理している場合を除いて、別ドメインの iframe には JavaScript でもアクセスできないので、Google Maps APIを使用する必要があります。

「iframeの外側の要素でヘッダを隠す」くらいが限界です。

【Googleマイマップを自分のページに表示する、あるいはその際の小技 - Qiita】
https://qiita.com/y-okuda/items/9d0243d7355cf87129e8

【【CSS】overflowの使い方：hiddenやscrollの違いは？】
https://saruwakakun.com/html-css/basic/overflow

---

ちなみにstyle 要素内に br要素は置けません。