Google Maps API 添加 Marker 是否免费?
结论
在 Google 地图上添加 Marker,通常不会根据 Marker 的数量单独收费。是否收费,主要取决于承载 Marker 的地图服务:
- 使用 Maps JavaScript API 时,需要启用结算账号。费用通常按地图加载所对应的 SKU 计算,而不是按 Marker 数量计算。最终是否产生费用,取决于当前免费用量、使用的功能和访问量。
- 使用 Maps Embed API 的 iframe 时,可以展示地点、路线或搜索结果。这类嵌入式地图通常免费,但仍需配置有效的 API Key,并遵守配额和使用条款。
- Google 提供的 iframe 是跨域内容,不能直接通过 JavaScript 在其中创建任意 Marker。如果需要多个自定义 Marker、点击事件、聚合或动态更新,应使用 Maps JavaScript API。
因此,判断费用时,不应只问“添加 Marker 是否免费”,而要确认使用了哪个 Maps Platform API、触发了哪个计费 SKU,以及每月请求量是否超过该 SKU 的免费额度。
为什么容易产生误解
问题中提到的链接是 Maps Embed API 的用量与结算说明,并不代表所有 Google Maps API 都免费。
Google Maps Platform 包含多个独立产品,例如:
- Maps Embed API
- Maps JavaScript API
- Maps Static API
- Geocoding API
- Places API
- Routes API
这些 API 的计费方式和免费用量各不相同。即使它们都用于显示 Google 地图,也不能根据 Embed API 的定价推断 Maps JavaScript API 的价格。
Google Maps Platform 的免费额度和 SKU 分类也可能调整。不要依赖旧资料中固定的“每月 200 美元赠金”等说法,应以项目控制台和当前官方价格表为准。
使用 Maps JavaScript API 添加 Marker
如果需要在地图上放置多个可交互的 Marker,可以使用 Maps JavaScript API。下面的示例使用 AdvancedMarkerElement:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Google Map Markers</title>
<style>
#map {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
async function initMap() {
const position = { lat: 31.2304, lng: 121.4737 };
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } =
await google.maps.importLibrary("marker");
const map = new Map(document.getElementById("map"), {
center: position,
zoom: 12,
mapId: "YOUR_MAP_ID"
});
new AdvancedMarkerElement({
map,
position,
title: "上海"
});
}
</script>
<script
async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly">
</script>
</body>
</html>
使用这种方式时:
- 页面加载交互式地图,通常会产生一次相应的地图加载用量。
- 在同一张已加载的地图上增加多个 Marker,通常不会因 Marker 数量增加而单独计费。
- 如果页面还调用了 Geocoding、Places 或 Routes 等服务,这些请求可能分别计费。
AdvancedMarkerElement通常需要配置mapId,具体要求以当前 API 文档为准。
使用 iframe 嵌入地图
如果只需要显示一个地点,可以使用 Maps Embed API:
<iframe
width="100%"
height="450"
style="border: 0"
loading="lazy"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Shanghai">
</iframe>
这种方式配置简单,但自定义能力有限。iframe 中显示的是 Google Maps 页面。由于浏览器同源策略的限制,外部页面无法访问 iframe 内部的地图对象:
// 对跨域 Google Maps iframe 不可行
const mapFrame = document.querySelector("iframe");
mapFrame.contentWindow.addMarker(...);
因此,不能把 Embed API 当作免费地图底图,再向其中注入多个 Marker。
虽然可以用 CSS 在 iframe 上方叠加普通 HTML 元素,但这些元素无法自动对应地图经纬度,也不能正确响应缩放、拖动和旋转,通常不适合充当真正的地图 Marker。
如何确认是否会产生费用
可以按以下步骤核对:
- 在 Google Cloud 项目中启用实际需要的 API。
- 为项目关联结算账号。即使预计用量在免费额度内,某些 API 仍要求启用结算。
- 在 Google Maps Platform 当前价格表中查找实际触发的 SKU。
- 根据每月地图加载量和其他 API 请求量估算费用。
- 在 Google Cloud Console 中设置预算提醒和 API 配额。
- 为 API Key 设置网站来源限制,只允许自己的域名调用。
- 定期查看 Billing Reports 和 Maps Platform 用量,不要只根据页面访问量推测费用。
注意事项
- 不要在前端代码中使用完全不受限制的 API Key。浏览器端 Key 必然可见,其安全性依赖 HTTP referrer 限制和 API 限制。
- 如果 Marker 的坐标通过 Geocoding API 获取,地理编码请求可能另外计费。
- 搜索框、地点详情和自动补全通常涉及 Places API,不能视为普通 Marker 功能。
- 不要通过截图、抓取地图瓦片或覆盖 Google 标识来规避计费,这可能违反 Google Maps Platform 服务条款。
- 如果项目要求长期零成本,并且需要大量自定义 Marker,可以评估使用 OpenStreetMap 数据和 Leaflet 等方案。但地图瓦片服务器仍有自己的使用政策和成本,不能默认公共瓦片服务可以无限免费使用。
备注:内容仅供参考。
