如何在 PrimeFaces 扩展 gChart 中设置 Google Maps API 密钥答案

【问题标题】：How to set Google Maps API key in PrimeFaces extensions gChart如何在 PrimeFaces 扩展 gChart 中设置 Google Maps API 密钥
【发布时间】：2017-08-02 14:32:54
【问题描述】：

我正在使用 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 错误：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 Maps API 错误一直出现在我的控制台中。

【问题讨论】：

向 PFE 添加了问题：github.com/primefaces-extensions/…

标签： google-maps primefaces primefaces-extensions

【解决方案1】：

免责声明：我创建了一个答案，不是因为它是 the 答案，而是因为它包含的信息太多，以任何方式都不适合评论（嗯； -))

免责声明 2：我可能遗漏了一些事情并且没有真正尝试过……希望您不要介意。

注意：三个月前，PrimeFaces 扩展更新为更新的 Google 图表 API version according to the commits 和 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);

与问题提交/修复/问题相关，在 PrimeFaces 扩展展示源 trunk 我还注意到它们明确加载

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

在 xhtml 中。

许多即将发生的变化，所以最适合未来的解决方案是尝试 6.2-SNAPSHOT 并在您需要的地方创建一个真正好的修复

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

【讨论】：

进一步阅读后，我发现确实需要对 JavaScript 进行一些更改。让我们看看我是否能找到一些时间来修复它，并可能在 GitHub 上提供 PR。谢谢！
我现在使用的是hack。
Jasper 我现在是 PF Extensions 的主要开发者。您能否在这张票中评论需要修复的确切内容，以便我修复它？ github.com/primefaces-extensions/…
我已经阅读了 Git 问题。现在似乎很清楚了，对吧？顺便说一句，我尝试创建一个资源处理程序来修补 JS，但我找不到 gchart.js 的加载位置。
构建时间，所有 .js 文件都被聚合并缩小到 primefaces-extensions.js 中，在 GChart.java 中被引用为 @ResourceDependency

【解决方案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>

【讨论】：

我计划将此功能添加到 PF Extensions 6.2 版本中。