Google マップをレスポンシブ対応でWEBサイトに埋め込む方法

WEBサイトにGoogle マップをレスポンシブ対応で埋め込む方法の紹介です。

Google MapsからHTMLをコピー

Googleマップにて、WEBサイトに埋め込みたい住所を検索します。
住所検索後、マップ画面にて共有ボタンをクリックします。
”地図を埋め込む”をクリックして、”HTMLをコピー”をクリックします。

WEBサイトにコードの貼り付け

HTMLの編集

以下を参考にコピーしたHTMLをdivで囲み、WEBサイトの地図を表示する箇所に貼り付けます。

<div class="map">

コピーしたHTML

<div>

CSSの編集

CSSに以下のコードを追加してください。

.map {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}
.map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

まとめ

GoogleマップからコピーしたHTMLだけだと、レスポンシブ対応にはなっておらず、スマホで見たときに画面が崩れているWEBサイトもあるかと思います。

その際の修正の参考になれば幸いです。