【HTML】MAPの埋め込み(iframe)

htmlcss

状況

個人的にブログで使う機会はほとんど無いが、Googleマップの埋込機能は簡単だった。

iframeタグ

Googleマップで検索し、共有から「地図を埋め込む」を選ぶと「HTMLをコピー」が表示。後はWordPressに貼り付けるだけ。FTPで編集する場合も同様。
iframeタグの「embed?pb=」以降に地図ごとのデータが入ってる。
サイズ指定により、widthとheight、styleも変わる。
直接アドレスバーからコピーしたものをsrc以降に貼り付けても、エンコードされているため使えない。状況によっては、デコードするなり工夫が必要。

map
実際の画面
<iframe src="~/embed?pb=hogehogehogehogehoge" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

allowfullscreenは、全画面モードを許可するかどうか。
loadingは、lazyならlazy loadingを有効にし適宜読み込むことでパフォーマンスを向上させる。eagerはデータ量の多いページならパフォーマンスに影響する。通常はauto
referrerpolicyはリクエストにリファラーを含めるか否か。今回のno-referrer-when-downgradeは、同一のプロトコル水準 (HTTP→HTTPなど)とそうでないものとで送信情報に違いが出る。
因みに、アドレスバーコピーのショートカットキーは、「ctrl + L」→「ctrl + C」

参照

iframe
Referrer-Policy

Google, html/css

Posted by himajinn