地図の色分け - グローバル

Google Chartを利用し、全世界の地図を表示する。

基本的にはここを参照して記載をすれば良いが、Bloggerで表示するためにCDATAの間にJavascriptを記載する（参照）。

--- ↓地図を表示 ---

--- ↑地図を表示 ---

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    //<![CDATA[　　　　　　　　　　　　　　　　　　　　　　　　　　
    <!--　
      google.charts.load('current', {
        'packages':['geochart'],
        // Note: プロジェクトのmapsApiKeyを取得する必要があります。
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      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>

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