Google Map API地图异常：仅显示标记点，背景呈灰色

问题核心表现 #

此前正常运行的Google Map API路径绘制功能，现在仅显示标记点和路线，地图背景呈灰色瓦片；调试发现调用https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.MapsJsInternalService/GetViewportInfo返回400 Bad Request，提示Invalid JSON payload received. Unexpected token.__vtrftk=sid:a45953c^；仅服务器根目录的测试文件可正常工作，其他位置失效。

针对性解决方案 #

1. 修复API密钥配置与引用方式 #

当前使用的无密钥API引用（http://maps.googleapis.com/maps/api/js?&sensor=true）已不符合Google Maps API的最新要求，非根目录页面可能因域名/路径未加入密钥允许列表导致瓦片加载失败：

• 替换API引用为带密钥的HTTPS格式：

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&sensor=true"></script>
  

• 登录Google Cloud控制台，确保：
  • Maps JavaScript API已启用
  • API密钥的应用限制中包含当前页面的域名及路径（可暂时放宽限制测试）

2. 移除页面注入的干扰令牌 #

错误中的__vtrftk令牌是服务器/页面框架（从字段ID判断疑似Vtiger CRM）自动注入的验证参数，干扰了Google Maps API的请求：

• 在地图初始化前清理URL中的干扰参数：

  // 初始化地图前执行
  const cleanUrl = window.location.href.split('__vtrftk=')[0];
  window.history.replaceState({}, document.title, cleanUrl);
  

3. 升级老旧jQuery版本 #

你使用的jQuery 1.6.4版本过于陈旧，可能与新版Google Maps API存在兼容性冲突，根目录测试文件可能环境不同：

• 替换为新版jQuery引用：

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  

4. 调整地图容器渲染时机 #

动态添加地图容器可能因非根目录页面DOM加载顺序问题，导致容器尺寸计算异常：

• 提前在HTML中定义地图容器（默认隐藏）：

  <div id="mapdiv" style="width:100%;height:600px;margin-bottom: 10px;display:none;"></div>
  

• 满足条件时显示容器：

  jQuery("#mapdiv").show();
  

5. 修复混合内容问题 #

若当前页面为HTTPS，但资源引用使用HTTP协议，浏览器会阻止混合内容加载：

• 将所有外部资源引用改为HTTPS协议（已在上述方案中体现）

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