GooglemapをCSSのみでレスポンシブ対応させる方法

Googlemapをレスポンシブ対応（デバイスの画面サイズに合わせて可変）させるcssの書き方の一例をご紹介します。

【手順1】
まず、Googlemapを表示させるコードをdivで囲み、任意のclass名を付与します。
ここではクラス名を”accessmap“とします。
 

<div class="accessmap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6487.262143313002!2d139.71813654999997!3d35.61216605000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188aecc88db641%3A0xbc885e432bdad03e!2z44CSMTQyLTAwNDEg5p2x5Lqs6YO95ZOB5bed5Yy65oi46LaK!5e0!3m2!1sja!2sjp!4v1429749547299" width="800" height="600" frameborder="0" style="border:0"></iframe>
</div>

2行目がGooglemapのコードです。コードの取得時期により、内容が異なる場合があります。※後述

【手順2】
下記のcssを追記します。

.accessmap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.accessmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% ;
    height: 100% ;
}

※.accessmapのpadding-bottomの数値は、縦に対しての高さの割合になるためマップサイズにより変化します。
デフォルトの16:9の場合に56.25％（9/16=0.5625）になります。

以上で対応完了です。
既存のGooglemapにもすぐ対応出来ます。お試しください。
 

【Googlemapの表示コードについて】

以前まではiframeの下に「大きな地図で見る」といったテキストリンクを表示させるコードがくっついてきましたが、
現在のGooglemapはMapの中に自動的にリンクが記載される仕組みの為、iframeのコードだけでOKな仕様となっています。
レスポンシブ対応を機に、新しいコードに変更するのも良いと思います。

Googlemap表示コードの取得方法