GoogleMap地図貼付をレスポンシブに

今時はスマホファーストで最初からレスポンシブ対応かと思っていたらひと手間必要と言うことが分かりました。


今まで「Facebook貼付をレスポンシブに」や「YouTube貼付をレスポンシブに」などの記事を書いてきましたが、今回はGoogleMapの地図の埋め込みをレスポンシブ化します。

埋め込みコードの取得から説明します。

①GoogleMapで目的の場所を表示。
②メニューから「地図を共有または埋め込む」をクリック。
③「地図を埋め込む」タブをクリック。
④コードをコピー。

例えばUSJを表示してコードを表示させると以下のようなコードになりました。

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3281.5745359397515!2d135.43014951548656!3d34.66544639261282!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1477271952290" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

コードにはwidth、heightが指定されていますが、これも含めてそのままで良いです。
このコードをdivで囲んで目的のページに埋め込みます。例としてdivのclass名を「google-maps」とします。

<div class="google-maps">コード</div>

cssを追加します。

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

これだけでレスポンシブ化完了です。
「60%」の部分は地図の縦横比ですので変更できます。その他もcssでいろいろ弄れますので解析していろいろ試してみようと思います。