对于咖啡馆、诊所、工作室或市集摊位来说,个人资料链接背后的页面有一个最重要的任务,就是让访客顺利找到店面。你可以通过 3 种方式把地图放到 Digily Link 页面上。具体选哪一种,取决于你的套餐,也取决于你想展示地图,还是提供一个可以直接开始导航的按钮。
方式 1:打开地图应用的路线按钮
这种方式适用于所有套餐,包括 Free,而且也是大多数访客真正需要的选项。很少有人会在手机上反复缩放地图,他们更习惯点一下"获取路线",然后直接开始导航。
- 打开 Google Maps,找到你的商家,点按分享并复制链接。
- 在控制面板中创建一个短链接,把刚才的地址设为目标地址,然后开启"在移动设备上自动打开应用"。Digily Link 可以识别 Google Maps 和 Waze 链接,因此手机安装了相应应用时,短链接会直接打开导航。深度链接指南解释了这一点为什么重要。
- 在页面中添加一个链接块,粘贴短链接,并将按钮文字设为"获取路线"。
由于按钮指向短链接,点击次数会记录在统计数据中。如果以后搬迁,也可以随时更换目标地址。
方式 2:使用 iframe 块嵌入地图
iframe 块适用于 Starter 和 Pro 套餐,可以直接在页面上显示地图。
- 在 Google Maps 中找到地点,打开分享,然后切换到"嵌入地图"标签页。
- 复制 Google 提供的 HTML。你只需要 src="…"中的地址,它以 https://www.google.com/maps/embed 开头。如果不方便从代码中找出地址,可以把完整代码粘贴到URL解析中。
- 在页面中添加一个 iframe 块,将该地址粘贴为 URL,并把高度设置为约 300 像素。
建议把方式 1 中的路线按钮直接放在地图下方。地图负责展示位置,按钮负责把访客带到那里。
方式 3:使用自定义 HTML 制作响应式地图
自定义 HTML 块适用于 Pro 套餐,可以让你完全控制地图,包括让地图在各种屏幕尺寸下保持合适比例。把下面的代码粘贴到块中,再将 YOUR_EMBED_URL 替换为"嵌入地图"标签页提供的地址。
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px"><iframe src="YOUR_EMBED_URL" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe></div>
padding-bottom 的值决定地图形状。56.25% 对应 16:9 的矩形,75% 对应更接近正方形的 4:3 地图,100% 则是正方形。loading="lazy"属性会延迟加载地图,避免访客还没滚动到地图时,它就拖慢整个页面。如果代码来自其他地方,建议先用HTML压缩工具整理,避免多余的换行导致块无法正常显示。
应该选择哪一种方式
| 你的需求 | 使用方式 | 套餐 |
|---|---|---|
| 点一下就开始导航 | 带应用跳转的路线按钮 | Free 及以上 |
| 直接在页面上显示地图 | iframe 块 | Starter 和 Pro |
| 自定义地图形状和样式 | 自定义 HTML 块 | Pro |
| 展示多个地点 | 每个地点使用一个标题和一个路线按钮,或者通过方式 2 或 3 嵌入自定义 Google My Maps 地图 | 取决于使用的块 |
本地商家实用建议
- 在地图上方添加一个段落块并写明邮政编码,方便习惯在自己的地图应用中手动输入地址的人。
- 添加营业时间块。这个块在免费套餐中也可以使用,访客就能判断现在是否适合出发。
- 每个页面只放一张地图。嵌入两张地图会让加载时间翻倍,但实际帮助很有限。
- 为页面生成 QR 码,并印在橱窗和宣传单上。场所页面的布局方法可参考小型企业简介链接页面指南。
- 分别在 iPhone 和 Android 手机上的 Instagram 内测试路线按钮。URL重定向查询可以显示短链接在桌面设备上的跳转情况。
快闪店、市集和活动
如果摊位每个周末都会换地方,不必每次都制作新地图。让路线按钮一直指向同一个短链接,只需在周五把目标地址改成本周末的摊位位置。页面地址、横幅上的 QR 码和个人资料链接都不用更改。在 Starter 和 Pro 套餐中,短链接还可以设置定时跳转,让周六的地点在午夜自动切换为周日的地点,不需要专门记着手动修改。还可以添加一个段落块,写明日期和邮政编码,方便习惯提前规划行程的人。
Apple Maps 和 Waze
应用跳转功能可以识别 Google Maps 和 Waze 地址。对于习惯使用 Apple Maps 的 iPhone 用户,可以添加一个包含地址的 maps.apple.com 普通链接。由于 Apple 的链接本身就是这样工作的,它会在 iPhone 上打开 Apple Maps,在其他设备上打开网页版地图,不需要额外设置。设置"Google Maps"和"Apple Maps"两个按钮,几乎可以覆盖所有手机,点击数据还会告诉你访客实际使用哪一个。
常见问题
需要 Google Maps API 密钥吗?
不需要。"嵌入地图"代码和分享链接都可以免费使用,也不需要密钥。只有开发者自行构建地图应用时,才需要 API 密钥。
可以同时显示多个地点标记吗?
在 Google My Maps 中创建一张包含所有地点的自定义地图,将其设为公开分享,然后把嵌入地址用于 iframe 块或自定义 HTML 块。
嵌入地图会拖慢页面吗?
会有一点影响,因此上面的代码采用了延迟加载。对于主要任务是引导访客到店的页面来说,路线按钮比地图图片更重要。
免费套餐可以添加地图吗?
可以添加路线按钮。iframe 块需要 Starter 套餐,自定义 HTML 块需要 Pro 套餐。套餐页面列出了每种套餐包含的功能。
如果商家搬迁了怎么办?
修改路线按钮所用短链接的目标地址,并替换地图的嵌入地址即可。已经印刷的任何材料都不需要更改。
上线前检查
- 路线按钮在手机上会打开地图应用,在桌面设备上会打开地图网页。
- 嵌入地图显示的是正确地点,并且在手机上能够适应页面宽度。
- 页面上已经写明邮政编码和营业时间。
- 页面中只有一张地图。
- 你已经在 Instagram 内完成测试,而不只是在浏览器中测试。