GoogleのgeoChart apiをReactに組み込んでみた

#初心者向け
(当方も初心者)
google visualizationの表示を既存のReactコードに組み込みたかったけど、いまいちapiの呼び出し方法がわからず、いろいろ調べた結果をまとめてみました。

##geochartのサンプルコード

```sample.html
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      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);

      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>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
```

>引用元
>https://developers.google.com/chart/interactive/docs/gallery/geochart

##React化してみる
###まず、headerに
　　`http://fb.me/react-0.13.3.js`と
　　`http://fb.me/JSXTransformer-0.13.3.js`

そして
　　`apiのurl`も追加

```geochart.html
<html>
  <head>
    <script src="http://fb.me/react-0.13.3.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>
  </body>
</html>
```

###スクリプトとして
　　`api key`,`チャートデータ`等をそのまま入力

```geochart.html
<html>
  <head>
    <script src="http://fb.me/react-0.13.3.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      google.charts.load('current', {
        'packages':['geochart'],
        '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>  
  </head>
  <body>
  </body>
</html>
```
###bodyにdivとReactを生成する
```
  <body>
    <div id="app"></div>

    <script type="text/jsx">
     var ChartMap = React.createClass({

       render: function() {
         return (
           <div id="regions_div">
           </div>
         );
       }
     });

//Reactをdivのid指定してレンダリング
     var m = React.render(<ChartMap />, document.getElementById('app'));
    </script>
  </body>
```

####　geochart.htmlをブラウザで開けばこのようになります


<img width="696" alt="スクリーンショット 2017-08-08 14.46.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/79589/15289eef-209f-82f3-c9e0-c2e643a44ebb.png">




こんな感じでやりました。ただ、この記述だとES6で書かれていないので、jsとhtmlを分離してReactComponentで次回は記述していこうと思います。