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サイトもあるかと思います。

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

投稿者プロフィール

バーベル合同会社

最新の投稿

• 会社ブログ2024-08-30WordPressにunderscoresテーマを導入する方法
• 会社ブログ2024-04-23エンジェルタッチ(グループウェア)の使い方など 商工会議所青年部YEG
• 会社ブログ2024-02-212024年版 WordPressで投稿記事の文字数をカウントする方法
• お知らせ2024-02-016期目がスタートしました。