埋め込みグーグルマップの縦横比を固定してレスポンシブ対応にする方法
お店や会社のアクセスマップをGoogleMapで設置するケースはとても多いと思います。個人で運営しているサイトでも、グーグルマップを設置したいなぁという方は多いのではないでしょうか。
埋め込み自体は簡単ですが、レスポンシブデザインのサイトでは、スマホで見た時に画面からはみ出してしまいます。max-widthなどを指定すれば、はみ出しは回避できますが、今度は縦長になってカッコ悪くなってしまいます。画面サイズに合わせて細かく指定するのは大変ですので、できれば縦横比を保ったまま画面サイズに合わせて拡大・縮小して欲しいところですよね。
そこで今回は、埋め込みのグーグルマップの縦横比を固定して、レスポンシブレイアウトに対応させるCSSです。私もしばらく使わないとググっちゃったりする事が多いので、覚え書き代わりに書いてみたいと思います。
～ 目次 ～
グーグルマップを縦横比を保ったままレスポンシブデザインに対応させるCSSコード
まず、下のコードをこのままコピーしてCSSファイルに貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* グーグルマップ・レスポンシブレイアウト */ .gmap-wrap{ position : relative; height : 0; padding-bottom : 56.25%; /* 縦横比の指定 */ overflow : hidden; } .gmap-wrap iframe, .gmap-wrap object, .gmap-wrap embed{ position : absolute; top : 0; left : 0; width : 100%; height : 100%; } |
上のコード内では、5行目で縦横比を固定しています。現在は56.25%ですが、ここを書き換えると自由に縦横比を設定できます。
|
1 2 3 4 5 6 7 8 |
/* 16：9 */ padding-bottom : 56.25%; /* 4：3 */ padding-bottom : 75%; /* 正方形 */ padding-bottom : 100%; |
PCだと16:9あたりがスマートに見えますが、スマホだと少し高さが足りなく感じる事もありますよね。小画面では、4:3くらいが見やすいかもしれません。メディアクエリを使って縦横比を変化させるのもアリですね。
HTMLの記述
HTMLの方はとってもカンタン。”gmap-wrap”というクラスを付けた要素の中に、グーグルマップの埋め込みコードを貼り付けるだけです。
|
1 2 3 |
<div class="gmap-wrap"> <!-- この行を消してグーグルマップの実際の埋め込みコードを貼付け --> </div> |
一応仕組みを書いてみる…
自分が理解できないコードはサイトに貼りたくない！という私のような人のために、一応仕組みを書いておきます。時間が無い方や仕組みはどうでもよい方は、この節は読み飛ばして下さい。
先程も書きましたが、グーグルマップはiframe内に展開されるので、普通にCSSで中身を変更できません。そこで、グーグルマップを縦横比を固定したコンテナ内に配置します。あとは、そのコンテナに合わせて、widthとheightを100％にしてあげるだけです。
どうやって縦横比を固定しているのか
paddingをパーセントで指定した時に、親要素の「幅」が基準になる事を利用しています。padding-bottomをパーセントで指定していますので、親要素の幅の〇〇％のpaddingが生まれ、それが高さになります。
実際にグーグルマップを設置したサンプル
実際に設置してみました。万一、このページをスマホで見て上手く縦横比が固定されていなかったら、このページの内容は信用できません。注意して下さい。。。
最後に
無事に縦横比が固定でき、スマホでも綺麗に見えるようになりましたでしょうか。
簡単に埋め込みできるグーグルマップですが、ひと手間かけてあげる事でグッと見やすくなります。
