Info kplace.plala.jpから移設しました

■目的
 スマホ対応のために、埋め込んだGoogleマップをResponsiveにします。

■埋め込み
 Googleマップでは、
[メニュー][地図を共有または埋め込む][地図を埋め込む]で埋め込みコードをコピーできます。
以下は埋め込みコードのサンプルです。
<iframe src="https://www.google.com/maps/embed?..省略.." width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
code
■Responnsive対応1
 Bootstrapベースなら"embed-responsive"で対応します。
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
■Responsive対応2
 CSSを使ったシンプルな方法は以下を参照しました。
 GitHub niklausgerber/responsive-google-or-bing-maps

■埋め込みサンプル
 サイトがBootstrapベースにつき"embed-responsive"利用です。
 ブラウザの表示幅に合わせてマップの表示サイズが変わります。

■結果
 Googleマップの埋め込みのResponsive対応が可能になりました。
 今回はBootstrapを使用していたのでhtmlのみ変更になります。
 なお対応1、対応2ともCSSの内容は実質同じでした。

  blog      MovableType