Google Mapをホームページに埋め込むことってよくありますよね。でも残念なことにただ埋め込みコードをコピペしただけではレスポンシブに対応していないんです。
スマホで見たときには地図のサイズが可変されないせいでコンテンツが小さくなってしまっていたり、残念な表示に・・・
これではせっかくのサイトが台無しですよね。
今日はそんな残念なGoogle Mapをかんたんにレスポンシブ対応でスマホでも最適化して表示されるように設定する方法をお伝えします。
Google Mapをホームページに埋め込む方法
表示させたい地点を検索
Googleマップにアクセスして、表示したい場所を検索します。
https://www.google.co.jp/maps/
左に出ている詳細画面にある「共有」をクリックします。
埋め込みコードを取得する
ポップアップ画面が出てくるので、「地図を埋め込む」タブをクリックします。
iframeのタグが出てきますので、右側にある「HTMLをコピー」をクリックしてコピーします。
ホームページに貼り付ける
そして、ホームページ上の表示したいところにiframeタグを貼り付けましょう。
何も指定せずに貼り付けると「中」サイズで貼り付けされ、width=”600″ height=”450″の指定になります。
Googleマップをレスポンシブに対応させる
このままではwebで表示したときに横幅がコンテンツピッタリではないため横幅を100%表示したいと思います。
iframeタグ内にある「width=”600″」を「width=”100％”」に変更しましょう。
これでマップの横幅がコンテンツ幅に合わせてぴったりフィットしましたね。
スマホで見ても横幅ピッタリに可変されるようになっています。
Googleマップの縦横比率を保ったままレスポンシブに対応させる
このままでも良いのですがスマホで見た時に横幅は短くなった分、縦長になっています。
ここからはパソコンのweb表示と同じように縦横の比率を保ったまま可変されるようにしていきたいと思います。
divなどのボックス要素でiframeをラップする
<div class="googlemap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3280.459315364195!2d135.49476261480737!3d34.69359319110732!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e6f1bf451d73%3A0x79284ec9f5029055!2z44OV44Kn44K544OG44Kj44OQ44Or44Ob44O844Or!5e0!3m2!1sja!2sjp!4v1640005400855!5m2!1sja!2sjp" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>親要素googlemapと子要素iframeにCSSを指定する
.googlemap {
position: relative;
width: 100%;
height: 0;
padding-top: 75%;/*比率4:3*/
}
.googlemap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}ラップした親要素「googlemap」に子要素「iframe」の基準点となるようにposition: relativeを指定します。
子要素の「iframe」にはposition: absoluteを指定します。
親要素googlemapの高さは「height」ではなく「padding-top」で、値は％で指定します。％指定なのは横幅に応じて可変になるからです。
ちなみに75％の理由は、アスペクト比4:3だからです。
450px ÷ 600px ×100=75%
Youtubeなどの画面サイズはアスペクト比16:9なので56.25％になります。
9÷16×100=56.25％
そしてCSSを指定したGoogleマップが下のものになります。
スマホで見たときもアスペクト比4:3で表示されました。
まとめ
googlemapをサイトに埋め込む機会は結構多いと思います。
でもスマホで見た時にサイズが大きすぎたり小さかったりして、サイトのレイアウトが崩れてしまっては台無しですよね。
レスポンシブ対応は必須とも言える技術ですので是非やってみてください。
