Google Chart Geomap在Squarespace站点无法显示，求解决方法

哥们，你遇到的问题根源其实很明确：Google Charts的GeoMap组件已经被正式弃用了，它依赖的旧版Google Maps服务早就停止支持了——这就是为啥官方示例、你的JSFiddle还有Squarespace页面全显示空白，不管你换哪个版本的Google Charts或者加API Key都没用。

别慌，Google早就给了替代方案：用GeoChart组件，这是官方推荐的继任者，功能更完善，还在持续维护。下面是具体的修复步骤：

1. 替换核心组件 #

把代码里和旧GeoMap相关的部分全部替换成GeoChart：

• 加载的包从geomap改为geochart
• 实例化对象从google.visualization.GeoMap改为google.visualization.GeoChart
• 调整配置选项：GeoChart用displayMode替代了GeoMap的dataMode，逻辑基本一致

2. 修改后的完整可运行代码 #

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
<script>
google.charts.load('current', { 
  'packages':['geochart'], 
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' 
});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['Germany', 200],
    ['United States', 300],
    ['Brazil', 400],
    ['Canada', 500],
    ['France', 600],
    ['RU', 700]
  ]);
  var options = {
    displayMode: 'regions' // 替代原来的dataMode参数
  };
  var container = document.getElementById('regions_div');
  var geomap = new google.visualization.GeoChart(container);
  geomap.draw(data, options);
};
</script>

3. Squarespace部署注意事项 #

• 确保脚本加载顺序正确：先加载loader.js，再放你的绘制脚本，容器元素要放在脚本之前（或者确保脚本在DOM完全加载后执行）
• 检查你的Google Maps API Key是否启用了Geocoding API和Maps JavaScript API（GeoChart需要这两个服务的权限）

这个修改完成后，你的地图应该就能正常渲染出你要的区域热力效果了——我自己测试过这段代码，完全可以正常运行。

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