Google Chartingライブラリを使用して、

Question

人がいないジオチャートを作成します。私は問題があります。私はウェブページを作っており、GeoChartをその中に入れたいと思っています。問題は、Googleの開発者のウェブサイトから直接貼り付けて既存のコードにコードを組み込んだとしても、地図が表示されないということです。私は何が間違っているのか分からない。

これは、JavaScriptの部分である： -

<script> 
google.charts.load('current', {'packages':['geochart']}); 
     google.charts.setOnLoadCallback(drawRegionsMap); 

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

      var options = {}; 

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

      chart.draw(data, options); 
     } 
</script> 

これは、HTML部分である： - 主な問題はここでは、div定義の中の余分な=あるよう

<div=id='regions_div' style="width: 600px; height: 500px;"></div> 

Answer 1

が見えます...
<div=id='regions_div' style="width: 600px; height: 500px;"></div>

このように、チャートはコンテナを見つけることができません。ブラウザコンソールで報告されています。また
<div id='regions_div' style="width: 600px; height: 500px;"></div>

...へ

変更、両方のライブラリをロードするようにしてください - loader.js & jsapi

...

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

 
    var options = {}; 
 
    var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages:['geochart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://www.google.com/jsapi"></script> 
 
<div id='regions_div' style="width: 600px; height: 500px;"></div>

作業スニペットで、次の