はじめに
Google MapからHTMLをコピーして貼り付けることでサイトにGoogle Mapを埋め込むことができる。
実装方法
1. Google Mapで目的地を検索 → 共有をクリック
2.地図を埋め込むをクリック → HTMLをコピー
地図のプレビュー画面が表示される
Mapのサイズを選ぶこともできる
| 表示サイズ | |
|---|---|
| 小 | 横 400px × 縦 300px |
| 中 | 横 600px × 縦 450px |
| 大 | 横 800px × 縦 600px |
| カスタムサイズ | 自由にカスタマイズ（px単位） |
↓ タグ内の width height でもサイズを調整することが可能
sample.html
<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d3240.827853398542!2d139.76493611522864!3d35
.68124053757879!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2
!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2
!1sja!2sjp!4v1594286431753!5m2!1sja!2sjp"
width="600" height="450" frameborder="0"
style="border:0;" allowfullscreen="" aria-hidden="false"
tabindex="0"></iframe>
3.コピーしたHTML(iframeタグ)を埋め込みたいHTMLにペーストして完成
赤いピンの位置を調整
↓ iframeタグを下記のように書き換える
sample.html
<iframe
src="https://www.google.com/maps?
output=embed&z=15&ll=35.6812405,139.7649308&q=東京駅"
width="600"
height="450"
frameborder="0"
style="border: 0;"
allowfullscreen=""
aria-hidden="false"
tabindex="0"
/>
これらの値を変えることで地図をカスタマイズすることができる
| iframeタグ内の記述 | 調整部分 | |
|---|---|---|
| &z=15 | 縮尺 | 0〜23で調整可 |
| &q=住所・建物名 | 住所・建物名 | |
| &ll=緯度,経度 | 地図の中心点 | Google Mapで検索した地点のURLに緯度・経度が記載されている |
↓ 赤線：緯度 / 青線：経度
ピンの位置を右下に移動することができた！
