Googleマップをレスポンシブに対応する方法

Googleマップを埋め込んだサイトはよく見かけますが、そのまま埋め込んだだけだとレスポンシブに対応できません。ですので今回は「Googleマップをレスポンシブに対応させる方法」をやっていきたいと思います。

Contents

1 まずはGoogleマップを埋め込む
2 Googleマップをレスポンシブに対応させる
- 2.1 HTML
- 2.2 CSS
3 まとめ

まずはGoogleマップを埋め込む

ご存知方も多いと思いますが、まずはGoogleマップをサイトに埋め込みむ方法を確認しましょう。

Googleマップにアクセスします。
https://www.google.co.jp/maps/

画面左にある検索ボックスで表示したい場所を検索します。今回は新宿駅にしました。
そして同じく左のメニューにある「共有」をクリックします。

するとこんな感じのポップアップが出てきますので、「地図を埋め込む」をクリックします。表示が変わりiframeのタグが出てきますので、コピーします。

iframeのサイズを大・中・小やカスタムサイズから選べますが、今回はサイズはCSSで指定しますので特に何も指定しません。

そして、表示したいところにiframeタグを貼り付けると下のように表示されます。簡単ですね。

サイズを特に何も指定しないと幅600pxの縦450pxになっていましたので、右側があいてしまっています。

iframeタグ内にある「width=”600″」を「width=”100％”」にしてみましょう。

横幅がフィットしました。

スマホで見ても横幅がはみ出すこともなく100%でフィットしています。

でも縦幅が450pxのままなのでスマホの場合はなんだか縦長です。。。

縦幅を「height=”auto”」にしてみます。

縦幅はうまくいきませんでした。（当然ですが。。。）

ということで、横幅に合わせて縦幅も可変になるように、本題のGoogleマップをレスポンシブに対応させていきたいと思います。

Googleマップをレスポンシブに対応させる

iframeをdivなどのボックス要素でラップします。

HTML

<div class="gmap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6480.97683504581!2d139.69603573227477!3d35.689596751983835!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd0d6b1ba1f%3A0x1c32a1f1ecacfdd5!2z5paw5a6_6aeF!5e0!3m2!1sja!2sjp!4v1536218871739" width="100%" height="auto" frameborder="0" style="border:0" allowfullscreen></iframe>
<div><!--gmap-->

そして、ラップしたgmapとiframeにCSSを指定します。

CSS

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