Googleマップ埋め込みタグのiframe書式例まとめ

書式例

赤田海水浴場の地図を表示する例

通常例

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26355.54307992571!2d130.87437829737954!3d34.339204853827596!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3543123bc72ce0c3%3A0x3d98f38cb01c0f43!2z6LWk55Sw5rW35rC05rW05aC0!5e0!3m2!1sja!2sjp!4v1628905054118!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

キーワードで指定するシンプルな例

<iframe src="https://maps.google.co.jp/maps?output=embed&q=赤田海水浴場&z=15" width="100%" height="450"  style="border:0;" allowfullscreen="" loading="lazy"></iframe>

パラメーター参考

googlemaps:apiを使用せず、パラメーター指定でiframeに地図を埋め込む。 | briccolog

https://www.bricoleur.co.jp/blog/archives/4452

埋め込みgooglemapの見た目を調整する - qiita

https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7

留意点

AMPページではwidth="100%"はエラーになるので、width="600"のようにピクセルで指定する必要があります。

layout="responsive"も加えておくと良いみたいです。(以下参考)

amp-img から学ぶ画像の表示のベストプラクティス - qiita

https://qiita.com/otsuky/items/9254065d41598cb242ce

その他参考

get started  |  maps urls  |  google developers

https://developers.google.com/maps/documentation/urls/get-started

googlemapへのリンクurl作成方法を調べた - qiita

https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b

PAGETOP