Googlemapをレスポンシブにしたい

2020年7月28日2023年9月29日

CSS コピペ

CSS googlemap

Yasuko

yasuko

フワちゃんにあこがれています

グーグルマップを埋め込んだ時にレスポンシブにならない。

そろそろ自主的にレスポンスしてほしいと願っております。

Googlemapの埋め込みをしてみる

Googleさんからいただいた埋め込みタグの外をdivで囲みます。

<div class="map-wrap">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14869.201315653547!2d-157.8606024720086!3d21.299146058182046!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6a04e2cf6c7b42d!2z44Kr44Oh44OP44Oh44OP5aSn546L5YOP!5e0!3m2!1sja!2sjp!4v1595908450997!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

囲んだdivごとレスポンシブにします。

.map-wrap {
  max-width: 100%;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 75%;　//地図の高さ
  position: relative;
}
.map-wrap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

Googlemapの高さは height ではなく padding-bottom で指定します。

pxで指定してもいいけれど、％で指定することで縦横比を維持したままサイズが変えられます。

縦横比が4:3の場合は

3/4*100=75

縦横比が16:9の場合は

9/16*100=56.25

デザインに応じた縦横比を指定することができます。

アレンジレシピ

iframeを使った埋め込みコードに応用もできます。

Youtube とか・・・