Googleマップの貼り付けコードをレスポンシブルにしてみた
Googleマップの貼り付けコードをレスポンシブルにしてみました。
動作例
サンプルはこんな感じ。スマホでは良い感じの大きさに表示されているはず。PCでは、ブラウザサイズを変えると、グニョニョーンと大きさが変わるはずです。
Googleマップをレスポンシブにする方法
Googleマップをレスポンシブにする方法のメモ。
CSSのコードはこんな感じ。
.iframeWrap {position: relative;padding-bottom: 80%;height: 0;overflow: hidden;}
.iframeWrap iframe {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}
上記CSSを適用した上で、Googleマップの貼り付けコードを div class="google-maps" で囲みます。
<div class="iframeWrap"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d416279.5567999613!2d139.37582504999997!3d35.40068855!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1387436912413" width="600" height="450" frameborder="0" style="border:0"></iframe> </div>
これでGoogleマップの表示がレスポンシブになるはずです。