Googleマップのレスポンシブ化の見本
Googleマップのレスポンシブ化処理前後のCodePenを下に置いておきます。
レスポンシブ化前
下のCodePenはGoogleマップのレスポンシブ化処理をしていないものです。縦横のピクセルサイズが固定ですので、小さな画面では地図が画面からはみ出ますし、大きな画面で見ると逆に小さく見えます。
See the Pen Google Mapのレスポンシブ化 by Satoru Shimizu (@sat-simizu) on CodePen.
レスポンシブ化後
下のCodePenはGoogleマップをレスポンシブ化したものです。画面サイズに合わせて、縦横比を変えずに地図サイズが変化します。
See the Pen Google Mapのレスポンシブ化 by s sim (@s-sim) on CodePen.
では、このようにGoogleマップをレスポンシブ化する方法を説明していきます。
Google Mapの埋め込み用コード
はじめに、Googleマップから埋め込み用コードをコピーするまでの手順を下の図にまとめました。
- GoogleMapの検索窓に住所を入力して検索
- 「共有」ボタンをクリック
- 「地図を埋め込む」タブをクリック
- サイズを選択（初期設定は「中」）
- 「HTMLをコピー」をクリック
この記事では、⑤の埋め込みコード（HTML）を改造し、CSSを当てることでGoogleマップをレスポンシブ化します。
HTMLの設定
縦横サイズを埋め込み用コードから削除する
初期状態のGoogleマップ埋め込みHTMLには下記のように、width（横幅）とheight（高さ）の記述があり、これがレスポンシブ化を邪魔しています。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2914.715326977537!2d141.3465952773223!3d43.068454440052015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f0b290ad18eab83%3A0x6e5e14aea4500740!2z44CSMDYwLTA4MDYg5YyX5rW36YGT5pyt5bmM5biC5YyX5Yy65YyX77yW5p2h6KW_77yU5LiB55uu!5e0!3m2!1sja!2sjp!4v1693438347095!5m2!1sja!2sjp"
width="600" height="450"
style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>ですので、埋め込みHTMLを貼り付けた後に、width（横幅）とheight（高さ）の記述を削除します。
埋め込みコードをタグで囲う
下の記述例では埋め込みコードをdivタグで囲い、クラス属性（例：map-wrapperなど）を忘れずに書きます。クラス属性はGoogleマップにCSSを当てる時のセレクターになります。
<body>
<div class="base-container">
<!-- グーグルマップの囲い -->
<div class="map-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2914.715326977537!2d141.3465952773223!3d43.068454440052015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f0b290ad18eab83%3A0x6e5e14aea4500740!2z44CSMDYwLTA4MDYg5YyX5rW36YGT5pyt5bmM5biC5YyX5Yy65YyX77yW5p2h6KW_77yU5LiB55uu!5e0!3m2!1sja!2sjp!4v1693438347095!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</body>CSSの設定
下にCSSの記述例を載せておきます。CSSではGoogleマップのスタイルに対して３点設定を書きます。
@charset "UTF-8";
body {
font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
}
// 全体の余白
.base-container{
padding: 50px 20px;
}
// Googleマップのスタイル
.map-wrapper iframe{
width: 100%; //横幅を100%
border-radius: 10px;
aspect-ratio: 16/9; //アスペクト比（縦横比）を指定
box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}- width：100%にします。
- height：100%にします。
- aspect-ratio：お好みの縦横比にします。上の例では16/9にしました（横：縦＝16:9）。
なお、他にも角丸や影付けなどのスタイルを書いていますが、必須ではありません。
