Googleマップの貼り付けコードをレスポンシブルにしてみた

Googleマップ,Hinemosu

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マップの表示がレスポンシブになるはずです。

新しいGoogleマップをレスポンシブ対応で埋め込む方法 : ライフハッカー[日本版] [参考]