How to set Google Maps API key in PrimeFaces extensions gChart

Question

I'm using PrimeFaces extensions (6.1.0) to create some charts using pe:gChart.

One of the charts is a geo chart as appears in the showcase. No problems so far.

Another chart I need to render is a marker geo chart. This is not explained in the PrimeFaces extensions showcase, but I was hoping this would be an easy job. I ended up with this model (which I believe is correct):

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);
}

When I run my project I do see a map for this chart. The region is correct, but no markers appear. There is marker data generated though.

My browser console tells me:

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

Is there any way I can set this API key without creating hacks?

Update

I've created a custom renderer:

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);
  }

}

And loaded it in the 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>

But the Google Maps API error keeps appearing in my console.

Answer 1

DISCLAIMER: I created an answer, not because it is the answer but because it is so much information that it won't fit in a comment in any way any way (hmmm ;-))

DISCLAIMER 2: I might have missed some things and did not actually try... Hope you don't mind.

Note: Three months ago PrimeFaces extensions updated to a newer Google charts api version according to the commits and issue 452 with upcoming changes so I focussed on that!

In the PrimeFaces-extensions gchart.js I noticed

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

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

While on on Visualization: GeoChart | Charts | Google Developers I saw

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);

Related tot the issue commit/fix/issue, in the PrimeFaces extensions showcase source trunk I also noted they explicitly load

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

in the xhtml.

Lots of upcoming changes, so the most future proof solution would be to try 6.2-SNAPSHOT and create a real good fix where you

• add a mapsApiKey property and getters/setters to GChart.java
• add .attr("mapsApiKey", chart.getMapsApiKey()) to GChartRenderer.java
• add this.mapsApiKey = cfg.mapsApiKey -and 'mapsApiKey': this.mapsApiKey to gchart.js in the right places