Google Maps の埋め込み地図をレスポンシブにする方法

2016/03/11 CSS

Google Maps の埋め込み地図をレスポンシブ化する方法について。

Google Maps の埋め込み用コードはそのまま埋め込んでもレスポンシブになってくれません。ラッパー div を作成してラッパーに padding ( padding-bottom ) を指定するちょっとハック的な方法が主流です。

CSS(SCSS):

// google-maps-wrapper クラスを iframe の周りの div に付ける
// @see http://www.labnol.org/internet/embed-responsive-google-maps/28333/
.google-maps-wrapper {
  position: relative;
  // アスペクト比
  // 横:縦 = 4:3 にする場合は 75%
  // 横:縦 = 9:16 にする場合は 56.25%
  padding-bottom: 75%;
  height: 0;
  overflow: hidden;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

HTML:

<div class="google-maps-wrapper">
  <!-- ここに Google Maps 埋め込み用の iframe を入れる -->
</div>

上のコードは SCSS スタイルで書いているので CSS にする場合は適宜変更が必要です。