ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】Googleマップの埋め込み方法とレスポンシブについて解説

【CSS】Googleマップの埋め込み方法とレスポンシブについて解説

HTML/CSS

2022/06/30

2023/05/08

Googleマップは、アクセス情報を視覚的に伝えるのに非常に便利です。Googleマップとともに住所や電話番号などを併記して掲載することで、ユーザーに分かりやすく自社のアクセス情報を伝えてくれます。

この記事では、「WebサイトにGoogleマップを埋め込む方法」について解説します。

この記事で身につく内容

WebサイトにGoogleマップを埋め込む方法

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

WebサイトにGoogleマップを埋め込む手順

WebサイトにGoogleマップを埋め込む方法については、まずはこちらの動画をご覧ください。

Googleマップを埋め込み手順

Googleマップを埋め込む手順としては次のとおりです。

埋め込むGoogleマップを開く
タイトル下部の「共有」をクリック
モーダルウィンドウが開いたら、「埋め込む」をクリック
<iframe>タグのコードが出てくるので、「コピー」をクリック
テキストエディタにコードを貼り付け
CSSでスタイル調整

Googleマップを開き、タイトル下部の「共有」をクリック

埋め込むGoogleマップを開いたら、タイトル下部の「共有」をクリックしましょう。

モーダルウィンドウが開いたら、「地図を埋め込む」をクリック

共有ボタンをクリックすると、モーダルウィンドウが開きます。「地図を埋め込む」をクリックします。

出力されたiframeタグのコードをコピー

地図を埋め込むをクリックすると、iframeタグのコードが出力されるのでそれをコピーします。

コピーしたコードをテキストエディタに貼り付け

そして、コピーしたコードをテキストエディタのHTMLファイルに貼り付けます。

<iframe　src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.0235362419057!2d139.70955231525997!3d35.72563968018387!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188dd58df071c5%3A0x27f5b0b8a414593c!2z44ixVE9NQVA!5e0!3m2!1sja!2sjp!4v1654931787997!5m2!1sja!2sjp"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"　referrerpolicy="no-referrer-when-downgrade"></iframe>

埋め込んだGoogleマップのレスポンシブ対応方法

コピーしたコードをそのまま埋め込んでブラウザに表示することはできますが、現状ではレスポンシブ対応になっていません。

<iframe　src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.0235362419057!2d139.70955231525997!3d35.72563968018387!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188dd58df071c5%3A0x27f5b0b8a414593c!2z44ixVE9NQVA!5e0!3m2!1sja!2sjp!4v1654931787997!5m2!1sja!2sjp"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"　referrerpolicy="no-referrer-when-downgrade"></iframe>

出力結果（レスポンシブ調整前）

レスポンシブ対応するためには、次のように記述します。

<div class="map">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.0235362419057!2d139.70955231525997!3d35.72563968018387!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188dd58df071c5%3A0x27f5b0b8a414593c!2z44ixVE9NQVA!5e0!3m2!1sja!2sjp!4v1654931787997!5m2!1sja!2sjp" 
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

.map {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

出力結果（レスポンシブ調整後）