如何在 PrimeFaces 扩展 gChart 中设置 Google Maps API 键

Question

我正在使用 PrimeFaces 扩展程序 (6.1.0) 使用 pe:gChart 创建一些图表。

其中一个图表是 geo chart as appears in the showcase。目前没有问题。

我需要渲染的另一个图表是 marker geo chart。这在 PrimeFaces 扩展展示中没有解释，但我希望这会是一件容易的事。我最终得到了这个模型（我认为这是正确的）：

GChartModelBuilder builder = new GChartModelBuilder();
builder.setChartType(GChartType.GEO);
builder.addOption("displayMode", "markers");
builder.addOption("region", country);
builder.addColumns("City", "Total");
for (...) {
  builder.addRow(city, total);
}

当我运行我的项目时，我确实看到了这张图表的地图。该区域是正确的，但没有出现标记。虽然生成了标记数据。

我的浏览器控制台告诉我：

Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

有什么方法可以设置此 API 密钥而不创建黑客？

更新

我创建了自定义渲染器：

public class MyGChartsRenderer extends GChartRenderer
{

  @Override
  protected void encodeMarkup(FacesContext context, GChart chart) throws IOException
  {
    ...

    this.startScript(writer, chart.getClientId());
    // Appended ?key=xxxxx to the URL (other lines are not modified)
    writer.writeAttribute("src", "https://www.google.com/jsapi?key=xxxxx", null);
    this.endScript(writer);
  }

}

并将其加载到 faces-config.xml:

<render-kit>
  <renderer>
    <component-family>org.primefaces.extensions.component</component-family>
    <renderer-type>org.primefaces.extensions.component.GChartRenderer</renderer-type>
    <renderer-class>MyGChartsRenderer</renderer-class>
  </renderer>
</render-kit>

但是 Google 地图 API 错误一直出现在我的控制台中。

Answer 1

免责声明：我创建了一个答案，不是因为它是答案，而是因为它包含的信息太多，不适合在无论如何（嗯 ;-)）

免责声明 2：我可能遗漏了一些东西并且没有实际尝试......希望你不介意。

注意：三个月前 PrimeFaces 扩展更新到更新的 Google 图表 api version according to the commits and issue 452 即将发生变化，所以我专注于此！

在PrimeFaces-extensions gchart.js我注意到了

google.charts.load('current', {
        packages : [ 'corechart', 'geochart', 'orgchart' ]
    });

    jQuery(document).ready(function() {
        google.charts.setOnLoadCallback(function() {
            that.draw();
        });
});

在 Visualization: GeoChart | Charts | Google Developers 我看到了

google.charts.load('current', {
    'packages':['geochart'],
    // Note: you will need to get a mapsApiKey for your project.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

与问题 commit/fix/issue 相关，在 PrimeFaces 扩展展示来源 trunk 我还注意到他们明确加载

<script src="https://www.gstatic.com/charts/loader.js"></script>

在 xhtml 中。

很多即将发生的变化，所以最有前途的解决方案是尝试 6.2-SNAPSHOT 并在你

的地方创建一个真正好的修复

将 mapsApiKey 属性和 getters/setters 添加到 GChart.java
将 .attr("mapsApiKey", chart.getMapsApiKey()) 添加到 GChartRenderer.java
在正确的位置将 this.mapsApiKey = cfg.mapsApiKey 和 'mapsApiKey': this.mapsApiKey 添加到 gchart.js

Answer 2

作为变通方法/hack，我已将此脚本放入我的 XHTML 中：

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxx&amp;v=3&amp;callback=google.loader.callbacks.maps&amp;sensor=false"></script>

如何在 PrimeFaces 扩展 gChart 中设置 Google Maps API 键

How to set Google Maps API key in PrimeFaces extensions gChart

google-maps

primefaces

primefaces-extensions

更新