開発環境

ruby 2.6.5
Ruby on Rails 5.2.5

前提

DB 内に住所のカラムを持つモデルがある
上記のモデルに CRUD 機能があり、その数を集計できるようにしたい

手順

① geochart を読み込むスクリプトを書く
② DB からの情報を加工するロジックを書く
③ ruby の変数を js にわたす
④ 地図を描画する

基本的に日本語の詳しい記事はないので
ドキュメントですすめる形になる

具体的なフロー

①
https://developers.google.com/chart/interactive/docs/gallery/geochart

上記のURLを参考にして読み込むスクリプトを書く

②

以下みたいなロジックを作った

    mapping_worship = []
    @user_introduction.user.worship_shintos.map do |shinto|
      a = shinto.address.match(/東京都|北海道|(?:京都|大阪)府|.{3}県/).to_s
      unless a == "北海道"
        a.chop!
      end
      if a[0] == "）"
        a.slice!(0, 1)
      end
      mapping_worship << a
    end

    mapping_count = mapping_worship.group_by(&:itself).map{|key,value| [key,value.count]}
    mapping_count.unshift(["都道府県","回数"])

もともと@user_introduction.user.worship_shintos ってしたら

（〒102-0071）北海道千代田区富士見2-4-1

のように、住所の情報が配列で入るんだけど
これだと geochart は認識しない

なので上記のロジックを通す

すると

 [["都道府県","回数"], ["京都", 8], ["東京", 161], ["広島", 16], ["島根", 5], ["茨城", 4], ["千葉", 1], ["北海道", 2], ["山梨", 4]]

てなる。

["都道府県","回数"] は地図を作るのに必要。

それ以外はマッピングするのに使う

あとは県とか都とか府が入ると認識されない。
北海道の道は必要。

③
gon っていう gem を使う。

これをいれて

gon.usermapping = mapping_count

ってすると js のファイルで gon.usermapping っていうプロパティが使えるようになる

④

これも公式を参考にして

document.addEventListener("turbolinks:load", function(){

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

document.addEventListener("turbolinks:load", function(){
  
})


function drawMap() {
  //都道府県単位のデータ
  let map = gon.usermapping
  var data = map;
  var dt = google.visualization.arrayToDataTable(data);
  var options = {
    region: 'JP',  //地域
    displayMode: 'regions', // regions=塗りつぶし, markers=マーカー 
    backgroundColor: '#ebf7fe', //背景色
    resolution: 'provinces',
    colorAxis: {colors: ["#CBDDC3", "#99E6B2", "#7AD2A8", "#5CBE9D", "#3DAA93", "#1F9688", "#00827E"], maxSize: 60 },
    colors:['white','green'], //階層の色
  };
  //出力するDivを指定して chart を生成
  var chart = new google.visualization.GeoChart(document.getElementById('region-div'));
  //描画
  chart.draw(dt, options);
}


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

とした

自分の環境は document.addEventListener("turbolinks:load", function(){　で
ラッピングしないと turbolink が邪魔して jQuery が動かないのでこうしている

gon.mapping で変数をセットしてそれをデータとして渡している。

細かい色とかスケールの色とかは調整した