Google Mapをレンスポンシブ対応する方法

2019.10.22

  • レスポンシブ

先日Google Mapを埋め込んだらスマホで確認した時に画像がはみ出してしまいました。

こちらを修正します。

htmlの修正

今回は下記iframeを利用してGoogle mapを表示させました。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3218.1974390222204!2d137.96854195030855!3d36.234697506929486!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601d0e8e19ce68d9%3A0x554d77007d50f332!2sSWEET+WORK!5e0!3m2!1sja!2sjp!4v1562556067123!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>           

こちらを、divタグで囲みます。

<div class="map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3218.1974390222204!2d137.96854195030855!3d36.234697506929486!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601d0e8e19ce68d9%3A0x554d77007d50f332!2sSWEET+WORK!5e0!3m2!1sja!2sjp!4v1562556067123!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>            </div>

cssの追記

次にcssに上記で追加したclassを記載します。

.map { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0;overflow: hidden; } .map iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }

確認する

対応後にサイトを確認すると、ちゃんとはみ出さずに表示されていることが確認できました。

以上です。