嵌入 Google 地图
Google 地图 ( Google Maps ) 是目前全球最多人使用的线上地图，这篇教学会介绍如何透过 HTML 的实作，将 Google 地图加到网页中，在网页里就能透过 Google 地图查看位置。
嵌入 Google 地图
前往 Google Maps 搜索一个地点 ( 例如中华民国总统府 )，找到地点后点击地点，从地点信息字段点击“分享”按钮。
弹出分享视窗后，切换至“嵌入地图”页签，点击“复制 HTML”。
打开自己的 HTML 文件，将复制的程序码贴到 <body> 里，网页中就会出现嵌入的 Google 地图。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2335.472656109652!2d121.5119699469226!3d25.0394817214553!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a90a8d497325%3A0x2876dc1b4d647f9!2z5Lit6I-v5rCR5ZyL57i957Wx5bqc!5e0!3m2!1szh-TW!2stw!4v1670380274984!5m2!1szh-TW!2stw"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
Google 地图 iframe 属性说明
嵌入 Google 地图之后，可以透过 iframe 的属性设定 Google 地图，下方列出常用的属性与说明：
| 属性 | 说明 |
|---|---|
| width | 宽度 ( 可使用 CSS 取代 )。 |
| height | 高度 ( 可使用 CSS 取代 )。 |
| src | Google 地图网址。 |
| frameborder | iframe 边框 ( 可使用 CSS 调整 )。 |
| allowfullscreen | 是否允许某些地图全屏幕显示，移除则不能全屏幕显示。 |
| referrerpolicy | 让 API 能正常运作的隐私权限 ( 不需更动 )。 |
微信扫码关注
抖音扫码关注