2022/10/26

【HTML+CSS】簡単にGoogle マップをレスポンシブ対応で埋め込む方法はaspect-ratioを使うだけ

Webサイト制作をしていると必ず実装するGoogleマップ。特にコーポレートサイトで実装することが多いですね。

レスポンシブ対応って難しそうだけど、これは本当に簡単。

簡単にGoogle マップをレスポンシブ対応で埋め込む方法はaspect-ratioを使うだけ

Googleマップで埋め込むHTMLコードを取得

まず住所や埋め込みたいスポットを検索し、共有ボンタンをクリック。

すると共有画面が出てくるので「地図を埋め込む」を選択。この際大きさは気にしなくて大丈夫です。

Googleマップ
Googleマップ

HTML

<div class="map">
  <iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7477985333035!2d139.7432442154278!3d35.65858483882067!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1666713686544!5m2!1sja!2sjp"
    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
    referrerpolicy="no-referrer-when-downgrade">
  </iframe>
</div>

Googleマップから取得したHTMLコードを貼り付けますが、適当にクラス名をつけたdivで囲った方が後々CSS当てやすくて良いかもしれない。

上記の貼り付けたHTMLの中に[width:”600″ height=”450″]とありますが、これは削除してしまいましょう。

CSS

    .map {
      width: 50%;

      @include g.sp {
        width: 100%;
        margin: 1em auto 1em;
      }

      iframe {
        @include g.pc {
          width: 460px;
          height: 260px;
        }

        @include g.sp {
          width: 100%;
          aspect-ratio: 16/9; //アスペクト比（縦横比）を指定
        }
      }
    }

これは実際の案件で使用したコードでPCではflexで左半分にGoogleマップを表示させて、SPでは横幅いっぱいに表示させるようにしてます。

  iframe {
        @include g.pc {
          width: 460px;
          height: 260px;
        }

iframeにwidthやheightを記入すればそれが適用されます。

   @include g.sp {
          width: 100%;
          aspect-ratio: 16/9; //アスペクト比（縦横比）を指定
        }

レスポンシブ対応にする際は[aspect-ratio]で値を設定すればOK！

もちろんPCとSPは分けずに最初から[aspect-ratio]で値の設定も可能。

Youtubeの埋め込みとレスポンシブ対応の方法はこちらの記事を参考にしてみてください

【HTML+CSS】WebサイトにYouTube動画をレスポンシブ対応して埋め込む方法

READ MORE IN BLOGS