Googleマップをレスポンシブで埋め込む

GoogleマップをWEBサイトに埋め込むとパソコンでは上手く表示できるのにスマホなどで見ると画面からはみ出してしまう場合の対処法

iPhoneで埋め込まれたGoogleMapを見るとこんな感じになりました。

20150623_082356000_iOS画面からはみ出していたGoogleマップ

20150623_081952000_iOSページ枠に収まりました。

CSSで対応しました。

スタイルシート

.google-maps {

position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

HTML

<div class=”google-maps”>

<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3283.4040833744193!2d135.4662822!3d34.6192275!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000dd417ff8bd8b%3A0xcaac812a9a90738e!2z6YG65ZOB5pW055CG44Gu44K744Oz44OI44Ov44O844Kv44K5!5e0!3m2!1sja!2sjp!4v1435045021596″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

</div>

  • このエントリーをはてなブックマークに追加