Google GeoChart报错：无回调加载Maps JS API不支持，适配动态数据

一、修复API加载的回调错误 #

现在Google Charts要求加载时必须指定回调，而且要保证回调函数在API加载前就已定义，避免出现找不到函数的情况。之前的报错大概率是因为回调定义时机不对，或者没正确通过loader指定回调。

正确的加载方式二选一：

方式1：用setOnLoadCallback指定回调 #

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
// 先定义回调函数，确保API加载时能找到
function initGeoChart() {
  google.charts.load('current', {'packages':['geochart']});
  // 初始化全局变量存图表实例，方便后续更新
  window.geoChartInstance = null;
}

// 绑定加载完成回调
google.charts.setOnLoadCallback(initGeoChart);
</script>

方式2：直接在loader参数里指定回调 #

google.charts.load('current', {
  'packages': ['geochart'],
  'callback': initGeoChart // 这里的initGeoChart要提前定义
});

⚠️ 注意：不要同时使用两种方式，会导致重复触发；另外不要单独加载Google Maps JavaScript API，GeoChart通过Google Charts loader加载即可，单独加载Maps API如果没传回调会触发你遇到的错误。

二、处理延迟数据和定时更新 #

不管数据是10秒后就绪，还是每小时更新，只需要写一个独立的图表更新函数，数据准备好就调用它即可，不需要依赖API加载时的一次性回调。

1. 定义全局更新函数 #

function updateGeoChart(dataArray) {
  // 把数组转换成Google Charts要求的DataTable格式
  const data = google.visualization.arrayToDataTable(dataArray);

  // 你的图表配置项，根据需求修改
  const options = {
    region: 'world',
    colorAxis: {colors: ['#f09300', '#0099cc']},
    legend: 'none'
  };

  // 复用图表实例：已存在则更新，不存在则创建
  if (!window.geoChartInstance) {
    window.geoChartInstance = new google.visualization.GeoChart(document.getElementById('geo-chart-container'));
  }

  // 绘制/更新图表
  window.geoChartInstance.draw(data, options);
}

2. 调用更新函数的场景 #

• 延迟数据就绪时（模拟10秒后获取数据）：

setTimeout(() => {
  // 替换成你实际获取数据的逻辑（比如AJAX请求）
  const newData = [
    ['Country', 'Value'],
    ['Japan', 180],
    ['India', 240],
    ['Australia', 150]
  ];
  updateGeoChart(newData);
}, 10000);

• 定时更新数据（每小时一次）：

setInterval(() => {
  // 这里写获取最新数据的逻辑
  const updatedData = [
    ['Country', 'Value'],
    ['Japan', 200],
    ['India', 260],
    ['Australia', 170]
  ];
  updateGeoChart(updatedData);
}, 3600000);

三、回调仍报错的排查点 #

如果加了回调还是弹错误，检查这几点：

• 确认回调函数在API加载脚本之前就已定义（比如放在<head>里，或者loader脚本的上方）。
• 检查是否误加载了独立的Google Maps JavaScript API，把它删掉，只用Google Charts loader加载GeoChart。
• 确保没有重复绑定回调（比如同时用了loader的callback参数和setOnLoadCallback）。

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