如何获取触发Google Maps API加载的页面分组计数？

针对你遇到的问题——想定位站点中哪个页面的Maps API加载量过高，而GCP自带的Maps工具信息不够细致，这里有几个能快速落地的解决思路：

• 利用Cloud Logging做请求来源聚合分析
  GCP的Cloud Logging会记录每一次Maps API请求的完整上下文，包括触发请求的页面referrer（来源URL）。你可以这么操作：

  1. 打开Cloud Logging控制台，创建日志查询过滤Maps API请求：

     protoPayload.serviceName="maps.googleapis.com"
     

  2. 在查询结果中，点击「添加字段」选择protoPayload.request.referrer，再用「分组依据」功能按这个字段聚合统计，就能直接看到每个页面的API请求计数。
     这个方法无需修改代码，靠现有日志就能快速锁定可疑页面。

• 给API请求添加自定义标识参数
  如果想长期更精准地追踪各页面的API使用情况，可以在加载Maps API的URL里加入自定义参数，比如：

  <!-- 首页的API加载 -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&client=page-home"></script>
  <!-- 产品详情页的API加载 -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&client=page-product-detail"></script>
  

  之后在GCP的Maps使用报告中，就能按client参数分组统计，每个页面的加载量一目了然。如果是单页应用，还可以把当前路由作为参数值，适配动态页面的统计需求。

• 前端埋点区分加载触发场景
  既然你怀疑存在页面预加载地图的情况，可以在调用Maps API的逻辑里加个简单埋点，同时记录页面信息和触发原因：

  function loadGoogleMaps(isUserInitiated) {
    // 上报页面和触发类型到内部分析系统
    fetch('/internal/log-map-load', {
      method: 'POST',
      body: JSON.stringify({
        pageUrl: window.location.href,
        triggerType: isUserInitiated ? 'user-interaction' : 'preload'
      })
    });
    // 加载Google Maps API
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_KEY';
    document.body.appendChild(script);
  }
  

  这样不仅能统计每个页面的加载次数，还能直接区分是用户交互触发还是预加载，帮你快速验证猜测。

因为你已经绑定了指定域名排除了外部滥用，找到加载量最高的页面后，再去检查它的地图加载时机，就能快速定位问题啦。

内容的提问来源于stack exchange，提问作者Wertisdk