GoogleマップをCSSでレスポンシブ対応させる方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、GoogleマップをCSSでレスポンシブ対応させる方法を紹介します。

GoogleマップはWebサイトの「会社概要」ページや「アクセス」ページでよく埋め込んで使用することが多いです。

Googleマップで任意の場所を検索し、「共有→地図を埋め込む→HTMLをコピー」で埋め込みコードを取得することができるのですが、そのままそれを貼り付けてもスマートフォンで閲覧した時に最適なサイズで表示することはできません。

今回紹介する方法を用いると、レスポンシブかつ比率を自由自在に制御することができるようになります。

それでは見て参りましょう！

Googleマップ単体の場合の実装
Googleマップがflexアイテムの場合の実装
まとめ

Googleマップ単体の場合の実装

まずは、基本的なGoogleマップレスポンシブの実装を軽く紹介します。

言い換えると、「Googleマップを横幅100%表示させたい」ときの実装方法となります。

HTML

index.html

<div class="GoogleMap">
  <iframe src="長いので省略" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>

Googlマップの埋め込みコードをdivでラップしてあげます。

CSS

index.css

.GoogleMap{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;/*比率をお好みで*/
}
.GoogleMap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

ラップした親要素にrelativeを、子要素のiframeにabsoluteを指定します。

マップの高さはpadding-topでお好みの縦横比率を%指定して調整してあげます。

縦横比率維持について詳しくは本記事で解説しませんので気になる方はこちらの記事で確認ください。

Googleマップがflexアイテムの場合の実装

このシチュエーションでの実装方法を紹介したくて本記事を書いています笑

Webサイトのデザインで「左側にGoogleマップを、右側に何かしらのコンテンツを表示」というものが多々ありまして、そういう時にはちょっぴり工夫が必要なのです！

要素を横並びにする際は必ずFlexboxを使用しますよね。

Googleマップがその子要素にあると冒頭で紹介した実装ではデザイン崩れになってしまいます。

次はそれをどうやったら上手く表示できるかを解説いたします。

完成イメージ

左にGoogleマップ、右に任意のコンテンツ

実装のポイント

今回の実装のポイントは、

親要素にdisplay:flexを指定する
左側と右側のコンテンツ合わせて横幅100%になるようwidthを指定する
Googleマップは２つのラップで囲ってあげる

となります。

コードを見ながら確認していきましょう。

HTML

index.html

<div class="Card">
  <div class="Card-Left">
    <div class="Card-Left-Map">
      <iframe src="長いので省略" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" class="Card-Left-Map-Iframe"></iframe>
    </div>
  </div>
  <div class="Card-Right">ACCESS</div>
</div>

CSS

index.css

.Card {
  display: flex;
}
.Card-Left {
  position: relative;
  width: 60%;
}
.Card-Left-Map {
  height: 0;
  padding-top: 56.25%;
}
.Card-Left-Map-Iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.Card-Right {
  width: 40%;
  background: #5bc8ac;
  color: #fff;
}

Googleマップレスポンシブのサンプルコード

See the Pen
GRJJyNj by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

以上、GoogleマップをCSSでレスポンシブ対応させる方法をご紹介しました。

「マトリョーシカのように２つのdivでラップしてあげればいいんだな！」

ということだけ覚えてもらえばOKです笑

最後までご高覧いただきありがとうございました！