レスポンシブに対応したGoogle Mapの埋め込み方

ここ

こんにちは、ここです。

サイトを制作する上で、Google Mapをページ上に埋め込むことは少なくないですよね。
埋め込み用のコードをサイトに貼り付ければ表示されるので、一見簡単なように思われます。

ですが、実はコードをそのままペーストするだけではレスポンシブには対応していないんです。PCでは問題なくてもスマートフォンなどで表示すると形が崩れてしまいます。
そこで今回は、レスポンシブに対応したGoogle Mapの埋め込み方を紹介します。

Google Mapの埋め込みタグを取得する

まずはGoogle Mapを開きます。
掲載したい場所を検索します。この時、住所ではなく会社名等で検索するとコードにもそれが反映されるのでそちらをおススメします。

目当ての地図が表示されたらオプションの中から「共有」を選択します。
「地図を埋め込む」を選択すると埋め込み用のコードが表示されます。サイズを選択できるようになっていますが、サイズは後程CSSで指定するので、どれを選んでも問題ありません。サイズを選択したら「HTMLをコピー」をクリック。

Google Mapを埋め込む為のHTML

<div class="map">
  <!-- Google Mapの共有タグを埋め込む -->
　<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3281.2189667819985!2d135.49081971553187!3d34.674422692132275!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e7043a282a01%3A0x498e46683d0b8433!2z5qCq5byP5Lya56S-44Kq44O844Or44Oe44ON44O844K4!5e0!3m2!1sja!2sjp!4v1661246870831!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

[iframe]タグを埋め込んだだけではレスポンシブ対応ができないので、[div]で囲う必要があります。CSSでスタイルを編集していくのでクラス名を指定してください。

Google Mapを埋め込む為のCSS

/* Google Mapを囲う要素 */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}

/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

[iframe]を囲う要素と[iframe]本体に対してスタイルを指定していきます。

まず、[iframe]を囲う[div]タグの指定です。[iframe]の位置を決めるために親要素が基準となるよう[position: relative]を指定します。[iframe]には[position: absolute]を用います。

ここではwidthには100%を指定します。それ以外の数値では比率が崩れてしまいます。横幅を指定する場合は別に後述するコードを指定する必要があります。

高さはhightではなくpadding-topで指定するため[height: 0]にしてpadding-topを調整していきます。今回は比率を4:3にするように75％(4:3＝100%:75%)としています。もちろんこの数値は変更が可能です。

横幅を指定する方法

<div class="map-wrap">
  <div class="map">
    <!-- Google Mapの共有タグを埋め込む -->
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.828030384825!2d139.76493075169924!3d35.68123618009717!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1618711259693!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
  </div>
</div>

横幅を指定する場合は[div]タグをもう一つ追加し、ここに横幅を指定します。横幅を指定する囲いの中に比率を指定する囲いがあるイメージです。

/* 横幅を指定するための要素 */
.map-wrap {
  max-width: 50%; /* ここに横幅を指定 */
}

/* Google Mapを囲う要素 */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}

/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

最後に

以上、レスポンシブに対応したGoogle Mapの埋め込み方でした。
少しでもお役にたてば幸いです。

コラム