AngularJS中ng-google-chart注入mapsApiKey解决GeoChart密钥缺失问题

你遇到的问题根源在于**mapsApiKey的位置放错了**——ng-google-chart并不从你定义的chart对象里读取Maps API密钥，而是需要在Angular模块的配置阶段全局设置。

正确的配置方式 #

你需要通过GoogleChartApiProvider来注入你的Maps API密钥，这是ng-google-chart官方推荐的做法，它会在加载Google Charts API脚本时自动带上密钥参数。

步骤1：在模块配置中设置密钥

修改你的Angular模块代码，添加配置块来设置API密钥：

angular.module('你的应用模块名', ['googlechart'])
  .config(function(GoogleChartApiProvider) {
    // 把你的生成的API密钥填在这里
    GoogleChartApiProvider.setMapsApiKey('Generated API Key');
  })
  .controller('ChartController', function($scope) {
    // 你的图表定义代码（移除chart.mapsApiKey这一行）
    var chart = {};
    chart.type = "GeoChart";
    // 👇 删掉这行无效的配置
    // chart.mapsApiKey = 'Generated API Key';
    chart.data = [
      ['City', 'Population', 'Area'],
      ['Rome', 2761477, 1285.31],
      ['Milan', 1324110, 181.76],
      ['Naples', 959574, 117.27],
      ['Turin', 907563, 130.17],
      ['Palermo', 655875, 158.9],
      ['Genoa', 607906, 243.60],
      ['Bologna', 380181, 140.7],
      ['Florence', 371282, 102.41],
      ['Fiumicino', 67370, 213.44],
      ['Anzio', 52192, 43.43],
      ['Ciampino', 38262, 11]
    ];
    chart.options = {
      region: 'IT',
      displayMode: 'markers',
      colorAxis: {colors: ['green', 'blue']}
    };
    $scope.chartInfo = chart;
  });

步骤2：保持HTML代码不变

你的HTML部分不需要修改，依然可以使用：

<div ng-controller="ChartController">
  <div google-chart chart="chartInfo" id="chart"></div>
</div>

为什么之前的方式无效？ #

ng-google-chart的chart对象并没有mapsApiKey这个配置项——这个密钥需要在Google Charts API脚本加载时就传递给Google服务器，而不是在单个图表实例中设置。通过GoogleChartApiProvider配置后，指令会自动在API请求URL中附加key参数，从而解决MissingKeyMapError。

额外注意事项 #

• 确保你的API密钥已经在Google Cloud控制台中启用了Google Maps JavaScript API和Google Charts API（GeoChart依赖这两个服务）。
• 建议给API密钥设置适当的引用限制（比如限制你的域名），避免密钥被滥用。

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