【HTML】Webページに地図を埋め込む

こばゆた
こばゆた

今回はWebサイトに”google map”を使ってマップを埋め込んでいく方法をみていきます

そんなに難しくなく順番にやれば簡単にできます

全く関係ないけど愛知県庁のクチコミが低いのが個人的に気になるところwww

スポンサーリンク

1.埋め込む

google mapの埋め込み方
  • STEP1
    google mapを開く
    google mapを開く
  • STEP2
    埋め込みたい場所を検索する
  • STEP3
    「共有」をクリック
  • STEP4
    「地図を埋め込む」をクリック
  • STEP5
    「HTMLをコピー」をクリック
    この時マップのサイズを変える場合は左側の中をクリックするとカスタムすることができます。
  • STEP6
    テキストエディターの挿入したい場所に貼り付ける

こばゆた
こばゆた

とても簡単に埋め込むことができました!

チャッピー
チャッピー

でもなんかサイズがちょっと小さい気がするなぁ

こばゆた
こばゆた

そういう時は下のように設定しよう

iframe{
  width: 100%;
}
チャッピー
チャッピー

画面いっぱいに広がった!

きなこ
きなこ

こういうのにもCSSが使えるんだね

こばゆた
こばゆた

角とかも丸められるけどあんまり無駄な装飾はしないほうがいいかなと思うよ

でも一応CSSも使えるってことは覚えておいた方が良いかもね

スポンサーリンク

2.レスポンシブ用

ここからは少し応用

①コードを記述

<div class="google-map">
  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13044.201768852876!2d136.9067123!3d35.1802953!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6003712c366c48c9%3A0x8e1efa105026ab86!2z5oSb55-l55yM5bqB!5e0!3m2!1sja!2sjp!4v1705581922248!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

②iframeのwidthとheightを削除

<div class="google-map">
  <iframe src="https://www.google.com/maps/embed?pb=省略" width="600"←削除 height="450"←削除 style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

③CSSを設定

.google-map{
  max-width: 800px;
  margin: 0 auto;

  iframe{
    width: 100%;
    aspect-ratio: 3/2;
  }
}

こんな風にaspect-ratioを使うと、画面サイズを変えても比率を維持できるのでおすすめです。

3.まとめ

地図の埋め込み まとめ
  1. google mapを開く
  2. 埋め込みたい場所を検索する
  3. 「共有」をクリック
  4. 「地図を埋め込む」をクリック
  5. 「HTMLをコピー」をクリック(この時サイズを変える場合は左側の中をクリックする)
  6. エディターに貼り付ける
  7. サイズを指定する
iframe{
  width: 100%;
}

コメント