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>

パラメーター参考

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

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

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

留意点

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

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

その他参考

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

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

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

前へ

WAMP環境構築フリーソフトのメモ

次へ

新型コロナウィルスから体を守るワクチンの動画や本とサプリについてメモ