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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

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

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

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

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

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

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マップのレスポンシブ対応

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

実装のポイント

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

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

となります。

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

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でレスポンシブ対応させる方法をご紹介しました。

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

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

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

あわせて読みたい

CSSで画像の縦横比を維持したまま表示させる方法【レスポンシブ対応】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です