GoogleマップをWEBサイトに埋め込むとパソコンでは上手く表示できるのにスマホなどで見ると画面からはみ出してしまう場合の対処法
iPhoneで埋め込まれたGoogleMapを見るとこんな感じになりました。
画面からはみ出していたGoogleマップ
ページ枠に収まりました。
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>
