Как установить ключ API Карт Google в расширениях PrimeFaces gChart

Я использую расширения PrimeFaces (6.1.0) для создания некоторых графиков, используя pe:gChart,

Один из графиков - это географический график, как показано на витрине. Пока проблем нет.

Другой график, который мне нужно визуализировать, - это гео-маркер. Это не объясняется в демонстрации расширений 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);
}

Когда я запускаю свой проект, я вижу карту для этого графика. Регион правильный, но маркеры не отображаются. Тем не менее, есть маркерные данные.

Моя консоль браузера говорит мне:

Ошибка API Карт Google: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages

Есть ли способ, которым я могу установить этот ключ 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>

Но ошибка API Карт Google продолжает появляться в моей консоли.

Источник

2 ответа

Решение

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я создал ответ не потому, что это ответ, а потому, что в нем так много информации, что он никак не вписывается в комментарий (хммм;-))

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ 2: Я мог пропустить некоторые вещи и на самом деле не пытался... Надеюсь, вы не возражаете.

Примечание: три месяца назад расширения PrimeFaces были обновлены до более новой версии API Google Maps в соответствии с коммитами и выпуском 452 с предстоящими изменениями, поэтому я сосредоточился на этом!

В PrimeFaces-расширениях gchart.js я заметил

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

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

Пока на визуализации: GeoChart | Графики | Разработчики Google я видел

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 транки исходного кода я также отметил, что они явно загружаются

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

в формате HTML.

Множество грядущих изменений, поэтому наиболее перспективным решением было бы попробовать 6.2-SNAPSHOT и создать действительно хорошее решение, где вы

  • добавить свойство mapsApiKey и методы получения / установки в GChart.java
  • добавить.attr("mapsApiKey", chart.getMapsApiKey()) в GChartRenderer.java
  • добавлять this.mapsApiKey = cfg.mapsApiKey -а также 'mapsApiKey': this.mapsApiKey в gchart.js в нужных местах
Источник

В качестве обходного пути / хака я поместил этот скрипт в свой 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>
Источник
Другие вопросы по тегам