> Expression Web 4 > Chapter 4 メディアの挿入と編集

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

Section 6 動的コンテンツの挿入
最終更新日時: 2016/08/01 22:55:07

Googleマップから埋め込みコードを取得して、コードビューに貼り付けますが、幅は固定となります。レスポンシブ対応にするには、その埋め込みコードのwidthの値を100%にするか、CSSで制御するとOKです。

はじめに

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だけで使いまわしが可能です(動作確認済み)。

4:3の比率の場合
.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%;
}
16:9の比率の場合
.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のコードのタグの要素に貼り付けます。

スポンサーリンク
INDEX

問題は解決しましたか?

操作方法、設定方法等で困ったら、Google+コミュニティ Expression Web Users Group Japan に投稿してください!

▲このページのトップへ