在网页上嵌入Google Map及设置图钉的方法 (上)

前言
最近在开发个人作品，刚好想要实现在网页中放入Google Map及设置图钉，所以花了一些时间查询、研究，发现其实有很多的方法或套件都可以实现这个功能！在这边先记录使用iframe的方法，在下一篇将会介绍使用套件vue3-google-map的作法。

iframe
使用iframe应该是最简单又快速的作法，iframe是HTML的内联框架元素，它可以将另一个HTML页面嵌入至当前网页。

取得方式：

打开Google Map搜寻你想要的地点﹙以下使用关渡大桥举例﹚点击分享 → 嵌入地图 → 複製HTML

在取得相关的HTML以后，我们就可以直接使用啦

<template><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5108.605898615278!2d121.45593008805143!3d25.124536107237553!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442af64b3a34a59%3A0x19f77dbe72e65285!2z6Zec5rih5aSn5qmL!5e0!3m2!1szh-TW!2stw!4v1709119611724!5m2!1szh-TW!2stw"    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"    referrerpolicy="no-referrer-when-downgrade"></iframe></template>

在这边可以看到它有很多的属性，我们可以再依需求去调整

src：要嵌入的网页URLwidth：显示宽度﹙预设为px﹚height：显示高度﹙预设为px﹚style：CSS样式设计allowfullscreen：是否启动全萤幕模式﹙可视性会因浏览器或设备而异﹚loading：是否应该在页面加载时立即加载﹙eager﹚，或者仅在需要时加载﹙lazy﹚referrerpolicy：控制浏览器发送的引荐信息﹙即告诉被嵌入内容是从哪个网页中载入的﹚

优点：快速、方便、简单
缺点：同一开始所提，iframe是将另一个HTML页面嵌入至当前网页操作，所以对网页效能、维护性、资安并非很有利

以上，就是iframe的简单介绍，bye!

---

※ 参考文件：iframe