Googleマップの埋込iframeをレスポンシブにする方法
2つのサンプルコードを記載しています。
・iframeをレスポンシブにする方法
・PCとSPでiframeの縦横比率を変えて、レスポンシブにする方法
目次
iframeをレスポンシブにする方法
iframeタグをレスポンシブに表示する方法です。
手順は２ステップ。
・iframeタグの外側にCSSのクラスを付けたタグ（div）を書き、
・そのCSSのクラスでレスポンシブ対応の記述を書く、
です。
iframeタグ（cssクラス付き）のサンプルコード
クラス名は何でもよいです。map_iframe_wrapにしています。
<div class="map_iframe_wrap">/*これを付ける*/ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975468369!2d139.74324421450814!3d35.65858048019959!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1605261169613!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> </div>/*これも付ける*/
レスポンシブ対応のCSSサンプルコード
付けたしたクラスにレスポンシブ対応のCSSを書きます。
GoogleMapの小・中・大なら以下のサンプルそのままでOKです。
その他は「padding-top」の値を調整する必要があるかも。
.map_iframe_wrap{
position:relative;
width:100%;
height:0;
padding-top:75%;/*GoogleMapの小・中・大は75%でOK。それ以外ではこの数値は調整が必要かも*/
}
.map_iframe_wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}padding-topの調整方法
Googleマップの「地図を埋め込む」で利用できる「大」「中」「小」で取得したiframeであれば75%で大丈夫です。
「カスタム」でサイズ変更した場合や、Googleマップ以外のiframe埋込の場合は、
padding-topのサイズ（上記では75%）は、適宜調整する必要があります。
どのように調整するのかといいますと、
iframeのwidth、heightの比率と、.map_iframe_wrapのwidth、padding-topの比率を合わせる
です。
上記のサンプルでいうと、
（１）のiframeは「width=”600” height=”450”」で、
.map_iframe_wrapのwidthは「100%」ですので、
600:400=100:？
？=75（%）です。（450は600の75%です）
この数値を計算してpadding-topに書いてください。
実際のレスポンシブになったGoogleマップはこちらです。
PCとSPでiframeの縦横比率を変えて、レスポンシブにする方法
次に、パソコンとスマホで地図のサイズ（縦横の比率）を変える方法です。
例えば、パソコンでは横1000px、縦400pxの比率（横長）で表示して、スマホでは横600px、縦600pxの比率で表示する、といった感じです。
iframeタグは同じもの利用して、CSSの記述を少し変えるだけです。
手順は２ステップ。
・iframeタグの外側にCSSのクラスを付けたタグ（div）を書く
・そのCSSのクラスでサイズ変更・レスポンシブ対応の記述を書く
です。
iframeタグ（cssクラス付き）のサンプルコード
CSSクラスはmap_iframe_wrap_changeにしています。
<div class="map_iframe_wrap_change">/*これを付ける。クラスはmap_iframe_wrap_change*/ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975468369!2d139.74324421450814!3d35.65858048019959!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1605261169613!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> </div>/*これも付ける。*/
PCとSPでサイズ変更・レスポンシブにするCSSサンプルコード
パソコン用の表示は横：縦が10:4、スマホ用の表示は横：縦が1:1にしています。
.map_iframe_wrap_change{
position:relative;
width:100%;
height:0;
padding-top:40%;/*10:4なので40%*/
}
.map_iframe_wrap_change iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
@media (max-width: 1000px) {/*メディアクエリは適宜変えてください*/
.map_iframe_wrap_change{
position:relative;
width:100%;
height:0;
padding-top:100%;/*1:1なので100%*/
}
}
実際のレスポンシブになったGoogleマップはこちらです。
パソコン（1000pxより大きい画面）で見ると10:4、スマホ（1000px以下）で見ると1:1になるはず。
コメント