レスポンシブ対応のGoogleマップを挿入するには

はじめに

travel.wanichan.jp サイトには、ところどころにGoogleマップを挿入しています。レスポンシブWebデザインに移行する際、私が行った対応として、iframeタグのstyle属性にwidthを100%にしています。

<iframe height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.jp/maps?f=d&amp;source=s_d&amp;saddr=Hyatt+Regency&amp;daddr=Bellevue+Transit+Center,+Bellevue,+WA,+United+States&amp;geocode=FeiY1gIdOVy3-CH36nmWvTU0CClXiUkWj2yQVDH36nmWvTU0CA%3BFQaO1gIdCHC3-CEvScl0uiVFlynF7EqjiWyQVDEvScl0uiVFlw&amp;aq=0&amp;oq=Bellevue+Tran&amp;sll=47.61828,-122.201031&amp;sspn=0.007391,0.021136&amp;hl=ja&amp;brcurrent=3,0x0:0x0,0&amp;mra=ls&amp;ie=UTF8&amp;t=m&amp;ll=47.616897,-122.199018&amp;spn=0.005063,0.015621&amp;z=16&amp;output=embed" style="width: 100%"></iframe>
<br>
<small><a href="https://maps.google.co.jp/maps?f=d&amp;source=embed&amp;saddr=Hyatt+Regency&amp;daddr=Bellevue+Transit+Center,+Bellevue,+WA,+United+States&amp;geocode=FeiY1gIdOVy3-CH36nmWvTU0CClXiUkWj2yQVDH36nmWvTU0CA%3BFQaO1gIdCHC3-CEvScl0uiVFlynF7EqjiWyQVDEvScl0uiVFlw&amp;aq=0&amp;oq=Bellevue+Tran&amp;sll=47.61828,-122.201031&amp;sspn=0.007391,0.021136&amp;hl=ja&amp;brcurrent=3,0x0:0x0,0&amp;mra=ls&amp;ie=UTF8&amp;t=m&amp;ll=47.616897,-122.199018&amp;spn=0.005063,0.015621&amp;z=16" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

しかし、100％にしてしまっても、高さがピクセル値で固定されてしまいます。

縦横比を保持したい場合は、YouTube動画の挿入と同じ要領でCSSで制御するとよいでしょう。

YouTube動画挿入用のCSSにプロパティを追加する

前の記事で紹介したYouTubeビデオ用のCSSにプロパティを追加すると一つのタグだけで使いまわしができます。iframe タグだけではなく、object タグと embed タグにも同じスタイルを適用するとOKです。Googleマップの場合はYouTube動画用のCSSだけで使いまわしが可能です（動作確認済み）。

.iframe-content {
    position: relative;
    width: 100%;
    padding: 75% 0 0 0;
}
.iframe-content iframe,iframe-content object,iframe-content embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.iframe-content {
    position: relative;
    width: 100%;
    padding: 56.25% 0 0 0;
}
.iframe-content iframe,iframe-content object,iframe-content embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

WebページにGoogleマップのコードを挿入する

1. コードビューに切り替えて、挿入したい部分にDIVタグを挿入します。

   <div class="iframe-content">
   
   </div>

2. Googleマップで目的の住所を指定（ホテルであればホテル名でOK）し、右下の歯車のアイコンをクリックして、［地図を共有または埋め込む］をクリックします。
   
3. ［地図を埋め込む］をクリックして、コードをクリップボードにコピーします。
   
4. Expression Web 4にタスクを切り替えて、手順1のコードのタグの要素に貼り付けます。

前のページ 次のページ