※当サイトにはプロモーションが含まれています。
クライアント スマホやタブレットで見た時に、埋め込んだGoogleマップが切れないようにしてくれ。
にゃテック おけまるだにゃ
Google Map（グーグルマップ）を使用して、会社やお店などの地図をサイトに埋め込みむことがあるかもしれません。
しかし、Googleマップを埋め込んで使用すると、意図せずに地図が見切れてしまう（はみ出してしまう）ことがあります。
Googleマップを普通に埋め込んだ場合
それは、埋め込む際に使用する<iframe>タグに、幅（width）と高さ（height）が指定されている為、その影響ではみ出してしまうのです。
今回は、サイトの幅にあわせて、地図の大きさを調整するCSSを紹介します。
埋め込んだGoogleマップをレスポンシブ対応させるCSS
埋め込んだGoogleマップをレスポンシブ対応させるHTMLとCSSです。
HTML
<div class="nya-map-container">
（Googleマップの埋め込みコード）
</div><div class=”nya-map-container”>タグで、iframeを囲みます。
CSS
.nya-map-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 高さを16:9の比率に設定 */
overflow: hidden;
}
.nya-map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}アスペクト比を変更したい場合、padding-bottomの値を変更します。
例えば、４：３の比率の場合は、padding-bottom: 75%;に設定します。
これで、タブレットやスマートフォンなどの小さい画面でも、Googleマップがレスポンシブ（幅に合わせて）表示されるようになりました。
レスポンシブ対応させた場合
なお、注意点として、レスポンシブ対応させると、スマホやタブレットで見た際に、地図を指で動かす操作ができなくなります。
※2025年1月現在、iPhoneで確認。Androidは未確認です。
Googleマップに移動すれば、地図を指で動かすことは可能です。
