Info kplace.plala.jpから移設しました
Responsive対応Googleマップ
作成日: 2017/05/30■目的
スマホ対応のために、埋め込んだGoogleマップをResponsiveにします。
■埋め込み
Googleマップでは、
[メニュー][地図を共有または埋め込む][地図を埋め込む]で埋め込みコードをコピーできます。
以下は埋め込みコードのサンプルです。
<iframe
src="https://www.google.com/maps/embed?..省略.."
width="800" height="600" frameborder="0" style="border:0"
allowfullscreen></iframe>
■Responnsive対応１
Bootstrapベースなら"embed-responsive"で対応します。
<div class="embed-responsive
embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
■Responsive対応2<iframe class="embed-responsive-item" src="..."></iframe>
</div>
CSSを使ったシンプルな方法は以下を参照しました。
GitHub
niklausgerber/responsive-google-or-bing-maps ■埋め込みサンプル
サイトがBootstrapベースにつき"embed-responsive"利用です。
ブラウザの表示幅に合わせてマップの表示サイズが変わります。
■結果
Googleマップの埋め込みのResponsive対応が可能になりました。
今回はBootstrapを使用していたのでhtmlのみ変更になります。
なお対応1、対応2ともCSSの内容は実質同じでした。
