[CSS]googleマップをレスポンシブに表示したい

気付けば4月。今月また歳を取ります。
というわけで書こうと思ってて忘れていたネタを2年越しに思い出したので書きます。
「今?!」というツッコミは大歓迎。

レスポンシブデザインのサイトが当たり前になり早有余年、アクセスマップページなどに貼り付けてるgoogleマップはレスポンシブですか？
googleマップの場合、基本何もしなくともスマホ、タブレット等で表示すると勝手に親要素に対して100%表示してくれますので特に考えることはないのですが・・・

高さが気になる

ということで、縦横の比率を揃えてスマホでもタブレットでも表示してみましょう。

html

<div class="access_map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3398.3535681824496!2d130.55501821554827!3d31.596770231344312!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x353e5e06f2ab6a37%3A0x3995fe12174cc6e5!2z44CSODkyLTA4MTYg6bm_5YWQ5bO255yM6bm_5YWQ5bO25biC5bGx5LiL55S677yR77yR4oiS77yRIOm5v-WFkOWztuW4guW9ueaJgA!5e0!3m2!1sja!2sjp!4v1491635726644" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

上記のようにaccess_mapというクラスの中にgoogleマップの埋め込みコードが入ってます。
ちなみに埋め込みコードは無加工です。

CSS

.access_map {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}
.access_map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

とすることでスマホもタブレットも縦横そのままでgoogleマップを表示することができます。

多少解説しておきます。

padding-bottom: 75%;

この部分でgoogleマップの縦横比を決定しています。
デフォルトのコードだと幅600px、高さ450pxになっています。
よって450/600=75%というわけです。真四角にしたければ100%ということになります。

まとめ

スマホで気持ち悪い縦長のgoogleマップもこれで解決ですね！
ぜひ一手間かけてステキなレスポンシブデザインライフを送りましょう！（ナニ？