埋め込みグーグルマップの縦横比を固定してレスポンシブ対応にする方法

2019年1月12日2019年1月16日

お店や会社のアクセスマップをGoogleMapで設置するケースはとても多いと思います。個人で運営しているサイトでも、グーグルマップを設置したいなぁという方は多いのではないでしょうか。
埋め込み自体は簡単ですが、レスポンシブデザインのサイトでは、スマホで見た時に画面からはみ出してしまいます。max-widthなどを指定すれば、はみ出しは回避できますが、今度は縦長になってカッコ悪くなってしまいます。画面サイズに合わせて細かく指定するのは大変ですので、できれば縦横比を保ったまま画面サイズに合わせて拡大・縮小して欲しいところですよね。

そこで今回は、埋め込みのグーグルマップの縦横比を固定して、レスポンシブレイアウトに対応させるCSSです。私もしばらく使わないとググっちゃったりする事が多いので、覚え書き代わりに書いてみたいと思います。

グーグルマップを縦横比を保ったままレスポンシブデザインに対応させるCSSコード

まず、下のコードをこのままコピーしてCSSファイルに貼り付けます。

上のコード内では、5行目で縦横比を固定しています。現在は56.25%ですが、ここを書き換えると自由に縦横比を設定できます。

PCだと16:9あたりがスマートに見えますが、スマホだと少し高さが足りなく感じる事もありますよね。小画面では、4:3くらいが見やすいかもしれません。メディアクエリを使って縦横比を変化させるのもアリですね。

HTMLの記述

HTMLの方はとってもカンタン。”gmap-wrap”というクラスを付けた要素の中に、グーグルマップの埋め込みコードを貼り付けるだけです。

一応仕組みを書いてみる…

自分が理解できないコードはサイトに貼りたくない!という私のような人のために、一応仕組みを書いておきます。時間が無い方や仕組みはどうでもよい方は、この節は読み飛ばして下さい。

先程も書きましたが、グーグルマップはiframe内に展開されるので、普通にCSSで中身を変更できません。そこで、グーグルマップを縦横比を固定したコンテナ内に配置します。あとは、そのコンテナに合わせて、widthとheightを100%にしてあげるだけです。

どうやって縦横比を固定しているのか

paddingをパーセントで指定した時に、親要素の「幅」が基準になる事を利用しています。padding-bottomをパーセントで指定していますので、親要素の幅の〇〇%のpadingが生まれ、それが高さになります。

実際にグーグルマップを設置したサンプル

実際に設置してみました。万一、このページをスマホで見て上手く縦横比が固定されていなかったら、このページの内容は信用できません。注意して下さい。。。

最後に

無事に縦横比が固定でき、スマホでも綺麗に見えるようになりましたでしょうか。

簡単に埋め込みできるグーグルマップですが、ひと手間かけてあげる事でグッと見やすくなります。

関連のある記事

Flexを使用した間隔(マージン)をとった横並びレイアウトの指定方法まとめ【CSS初心者向け】

Flexを使用した間隔(マージン)をとった横並びレイアウトの指定方法まとめ【CSS初心者向け】

記事を読む

CSSでobject-fitを使わずに特定の縦横比に画像をトリミングする方法

CSSでobject-fitを使わずに特定の縦横比に画像をトリミングする方法

記事を読む

游ゴシックがIEで上にずれる時のCSSでの対応方法

游ゴシックがIEで上にずれる時のCSSでの対応方法

記事を読む

CSSでセンタリングした複数行テキストの改行位置を揃えて綺麗に見せる方法

CSSでセンタリングした複数行テキストの改行位置を揃えて綺麗に見せる方法

記事を読む

スマホで画像が一瞬だけ大きく表示されてしまう場合のCSS修正方法

スマホで画像が一瞬だけ大きく表示されてしまう場合のCSS修正方法

記事を読む


目次へ
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages