owned mediaウェブ制作に役立つコンテンツを発信中!

インラインのグーグルマップをレスポンシブ対応にする

最終更新日: Update!!
ウェブサイトでもよく使われているグーグルマップのインライン埋め込みですが、レスポンシブ対応にするためにはCSSで調整する必要があります。結構増えてきているケースなので備忘録としてのメモです。  
グーグルマップのレスポンシブ対応
グーグルマップをレスポンシブ対応させるために、iframeを囲うwrap要素が必要です。それと合わせてiframe自体にもスタイルを適用していきます。以下HTMLとCSSのサンプルです。   【HTML】
<div class="googlemap-wrap">
   <iframe src="https://www.google.com/maps/embed?pb=*****************" width="1000" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
  【CSS】
.googlemap-wrap {
   position: relative;
   padding-bottom: 50%;
   height: 0;
   overflow: hidden;
}
.googlemap-wrap iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
@media (max-width: 576px) {
   .googlemap-wrap {
     padding-bottom: 100%;
   }
}
  CSSでグーグルマップwrap要素のpadding-bottomの値で縦横比を調整します。(上記は2:1の比率)また、スマホでの表示で比率を保つと高さも小さくなるので、メディアクエリーでwrap要素のpadding-bottomの値を100%にすることで当初の高さに戻ることができます。サンプルはこちらにあげていますのでご参考に。   (参考) Googleマップを横幅100%でレスポンシブに表示する
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram