You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何区分Google Maps的Embed、Embed Advanced与Dynamic Map类型?

如何判断你使用的Google Maps类型

嘿,我来帮你梳理下怎么区分这三种地图类型,这样你就能对应上定价页面里的项目,搞清楚自己的使用限额了:


1. Embed 基础嵌入地图

这是最省心的嵌入方式,一般是直接从Google Maps官网复制的iframe代码,结构大概长这样:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

核心特征:纯iframe嵌入,不需要加载Google Maps的JS库,功能很基础——只能固定展示某个地点,支持缩放,但没法做自定义交互(比如加标记、绑定点击事件)。

2. Embed Advanced 高级嵌入地图

同样是iframe嵌入,但支持更多自定义配置,代码里会带API Key以及更多URL参数,比如设置地图类型、添加标记点之类的,示例代码:

<iframe src="https://www.google.com/maps/embed/v1/place?q=...&key=YOUR_API_KEY&zoom=15&maptype=satellite" width="600" height="450"></iframe>

核心特征:需要用到你的API Key,能实现比基础Embed更多的自定义,但还是基于iframe,不需要自己写JS逻辑,灵活性不如动态地图。

3. Dynamic Map(动态地图,即Google Maps JavaScript API)

这是完全靠JS代码渲染的地图,你得先加载Google Maps的JS库,然后自己写代码初始化地图、添加功能,典型的代码结构是这样的:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script>
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}
</script>
<div id="map"></div>

核心特征:必须引入maps.googleapis.com/maps/api/js这个JS库,所有地图的行为、样式、交互都靠你写的JS代码控制,是三种里功能最灵活的,支持自定义图层、标记、事件监听等复杂操作。


你可以对照自己网站里的代码来判断:

  • 如果只有iframe,没加载Google Maps JS库,那要么是基础Embed(不带API Key),要么是Advanced Embed(带API Key和自定义参数)
  • 如果有加载那个JS库,还写了初始化地图的代码,那肯定是Dynamic Map类型

确定类型后,就能对应到定价页面里的对应项,估算自己的使用限额啦。

内容的提问来源于stack exchange,提问作者Ogge

火山引擎 最新活动