

そんな疑問にお答えします。
WebサイトをみるとGoogleマップを載せている場合が非常に多いです。
ということはGoogleマップを埋め込むコーディング方法はマスターしておかなくてはなりません。
とはいっても最初はなかなか上手くできなくて戸惑うものです。
この記事では
- Googleマップの埋め込みタグの取得方法
- 縦横比の保ち方
- レスポンシブ対応
について解説します。
一度やり方を覚えてしまえば使い回せますが、なぜそう書くのか?という型の理解はしっかりしておきましょう。
Googleマップの埋め込みタグの取得方法
最初にGoogleマップの埋め込みタグを取得します。
まずはGoogleマップを開きます。
①マップを開いたら場所を検索します。
②「共有」をクリックします。
③ポップアップが開くので「地図を埋め込む」タブを選択します。
④共有用のコードが表示されるので「HTMLをコピー」します。
サイズ選択(小・中・大・カスタムサイズ)できますが、サイズはCSSで調整するのでそのままでOKです。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683714!2d139.74324421564378!3d35.65858048019955!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1644623036555!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
このような埋め込みタグがコピーできます。
縦横比を保ったままレスポンシブ対応させる方法
コード
<div class="map">
<div class="iframe-wrap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683714!2d139.74324421564378!3d35.65858048019955!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1644623036555!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
.map {
width: 100%;
max-width: 800px;
}
.iframe-wrap {
position: relative;
width: 100%;
padding-top: 75%; /* = height ÷ width × 100 */
}
.iframe-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
解説
縦横比とレスポンシブ対応
レスポンシブ対応させるためには、iframeタグをdivタグで囲う必要があります。
このdivタグに対して縦横比を指定します。
今回は4:3の比率としています。
よって padding-top: 75%; ( = height ÷ width × 100 )と指定します。
あとは position:「relative」「absolute」でiframeを位置指定 しています。
横幅の指定
横幅を指定するには、一番外側に全体を囲うdivタグをもうひとつ追加します。
<div class="map">
<div class="iframe-wrap">
<iframe src="https://www.google.com/maps/…省略></iframe>
</div>
</div>
今回だと <div class=“map”></div> がこれに当たります。
.map {
width: 100%;
max-width: 800px;
}
一番外側に囲ったdivタグに対して横幅の指定を行います。
これで横幅が指定され、且つ比率を保ちながらレスポンシブ対応するGoogleマップが埋め込まれます。
まとめ
- 一番内側にGoogleマップのiframe本体
- その外側をdivタグで囲う(要素①)
- 要素①にpadding-topで縦横比指定
- position「relative」「absolute」でiframe本体を配置
- 一番外側に全体を囲うdivタグを置く(要素②)
- 要素②に横幅を指定
上手くいくまで何度も試して自分のものにしましょう。
投稿者 トシ
コメントを残す