楽天ブログでGoogleMapの埋め込み(iframeタグ)が出来なくなりました

2020.03.28

楽天ブログでGoogleMapの埋め込み(iframeタグ)が出来なくなりました

(4)

2年ほど前に楽天ブログで埋め込みマップが使えるよう

になったのですが最近使えなくなってしまった模様です。

ブログ編集画面では問題なく表示され、地図のスクロールも

できますが、保存すると「入力エラー」となってしまいます。

iframeというhtmlタグがエラーにひっかかります。

過去に作ったブログに埋め込んだGoogleMapは

問題なく動作していますので、楽天ブログが

「公開」動作をする際の構文チェックに引っかかって

いるものと思います。

インラインフレームに外部(GoogleMap)が埋め込めると

別ウインドウを開かずに扱えるのでブログが読みやすく

なりますので、是非、復活させてほしい次第です。

埋め込む地図のソースコードはこんな感じです。

(GoogleMapの自動生成コードです)

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30956.121816139144!2d138.71726373074424!3d35.35908377447217!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6019629a42fdc899%3A0xa6a1fcc916f3a4df!2z5a-M5aOr5bGx!5e0!3m2!1sja!2sjp!4v1585386551568!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

▼2021/1/31追記

いま、気づいたのですが埋め込みMapが使えるように

なっていました

これは助かります

▼2021/2/28追記

再びGoogle Mapの埋め込みができなくなって

しまいました

調べたところ、遅延読み込みのLazy-loadingが

指定された埋め込みコードがGoogle Mapから

吐き出される様になったことに起因していました。

元々Chromeで採用された遅延読み込みですが、

いまではweb標準になっているため、

Googleとしては標準でこのコードを生成する

ようにしたのだと思われます。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13015.194724953557!2d138.71860862910162!3d35.36064218368305!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6019629a42fdc899%3A0xa6a1fcc916f3a4df!2z5a-M5aOr5bGx!5e0!3m2!1sja!2sth!4v1614471002851!5m2!1sja!2sth" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

↑赤文字部分を消せば、楽天ブログで地図を埋め込み

できるようになります

本来、この遅延読み込みは画面に表示されていない

ページ下方にあるデータを後から読み込むことで

データ使用量を減らす目的の機能ですが、

Chromeのライトモード(データセーバー)をONに

しているときだけ有効になります。

▼2022/3/31　追記

最近、また埋め込みコードに追加が行われました。

<iframe src="https://www.google.com/maps/embed?
・・・（略）・・・
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

リファラーポリシー属性でHTTPSからHTTPに

移動する際、リファラーを送らない設定が明示されました。

下位セキュリティ基準へ移行する際の動作指定のため、

セキュリティ対策ですかね。

例によって、楽天ブログはこれに対応していないので、

消さないと埋め込みGoogleマップが使えません