概要
公式の手順でiframeの埋め込みグーグルマップをWEBサイトに表示させ、レスポンシブ対応させる方法を紹介。用途
- 簡単にグーグルマップをWEBサイトに表示させる。
- iframeで表示。
- レスポンシブに対応。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
実装方法
- https://www.google.co.jp/maps/で任意の箇所を検索。
- サイドバーの[共有]をクリック。
- ポップアップ内の[地図を埋め込む]をクリック。
- [HTMLをコピー]をクリック。
- レスポンシブ対応は下記ソースコードを参照。
HTML
<div class="c-map"><!-- 任意のタグでiframeを囲う -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d207446.9730421839!2d139.60078482570233!3d35.668162530062624!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b857628235d%3A0xcdd8aef709a2b520!2z5p2x5Lqs6YO95p2x5Lqs!5e0!3m2!1sja!2sjp!4v1640332477742!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<!-- loading="lazy"を付与する場合は、width,height属性も記載 -->
</div>
SCSS
.c-map {
position: relative;
width: 100%;// 任意
padding-top: 50%;// 任意
iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
}
CSS
.c-map {
position: relative;
width: 100%;/* 任意 */
padding-top: 50%;/* 任意 */
}
.c-map iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
