Google Chart Geomap不工作

Question

我试着在我的Squarespace网站上使用Google Chart Geomap。但是我在那里得到了空白的容器。

以下是源url：https://developers.google.com/chart/interactive/docs/gallery/geomap?csw=1#regionsexample

请注意，即使是这个带有用法示例的页面也显示空白容器。与放置在该页面上的JSFiddle相同。我通过放置我的ApiKey来编辑JsFiddle，但是我仍然得到相同的结果。

然后我找到了这个answer，并尝试了许多版本。但这并不管用。我试了45，44，43和42。

如何让它工作？

我的Squarespace页面链接是(如果需要)：https://campisano.squarespace.com/map-1

​

      google.charts.load('current', {
        'packages':['geomap'],
        // 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(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="regions_div" style="width: 900px; height: 500px;"></div>

​

：My jsfiddle。

Answer 1

对于初学者，包应该是'geochart'，而不是'geomap'

以及图表对象...

google.visualization.GeoChart

不是..。

google.visualization.GeoMap

最后，没有--> dataMode的选项

它应该是--> displayMode

请看下面的工作片段...

​

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

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['displayMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoChart(container);

        geomap.draw(data, options);
      };

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>

​