Google Chartがモーダルで上手く表示できない時

簡単にグラフが作れて人気なGoogle Chart。その中の「GeoChart」は都道府県別の日本地図を作成できます。以下のように都道府県別で色分でき、カーソルを当てるとパラメータを表示してくれます。
<img width="515" alt="map.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606118/cdd07354-ec80-26dc-763c-a98b6d90dc67.png">


#やりたいこと

今回は既にあるオリジナルサービス内に、ユーザー詳細ページにあるリンクをクリックするとモーダルでユーザーのデータが反映されたMAPを表示する機能を実装します。


ということでファイルを作成。
（データを入れる処理は人それぞれなので割愛）

```ruby:users/_map.html.erb
<div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title" id="myModalLabel"><%= "#{@user.name}がイベントで訪れた都道府県" %></h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    </div>
    <div id="regions_div"></div>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawRegionsMap);
      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable(gon.map_data);
        var options = { region: 'JP', resolution: 'provinces', width: '100%', height: 500 };
        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
        chart.draw(data, options);
      }
    </script>
  </div>
</div>
```

```javascript:users/map.js.erb
$("#map-modal").html("<%= escape_javascript(render 'map') %>")
$("#map-modal").modal("show")
```

```ruby:users/show.html.erb

-略-

<%= link_to map_user_path(user), remote: true do %>
  <%= image_tag "/images/japan.png" %>
<% end %>

-略-

<div class="modal fade" id="map-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>
<div class="modal fade" id="recommend-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>
```

```ruby:users_controller.rb
def show
    gon.map_data = @user.prefecture_data
end
```
prefecture_dataメソッドはmodels/user.rb内に作ったメソッドで、都道府県に行ったデータを取得していると思ってください。

#問題

さあ準備ができたので、実際にブラウザでリンクをクリックしてみましょう。

<img width="1280" alt="スクリーンショット 2020-07-25 23.41.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606118/e691d213-eb4f-42cd-6f5f-062563e080a0.png">


あ、あれ！！？？(･_･;

上手く表示されていません…
モーダルタイトルの「ゲストユーザーがイベントで訪れた都道府県」は表示されていますが肝心な日本地図は表示されませんでした。

#解決

どうやらmodalが完全に表示する前に、地図を描画させてしまっている事が原因のようです。
今回はmap.js.erbにjQueryで以下のように書いてみました。


```javascript:map.js.erb
$("#map-modal").html("<%= escape_javascript(render 'map') %>")
$("#map-modal").modal("show")

#以下を追記

$("#map-modal").on("shown.bs.modal", function () {
  google.charts.load('current', {'packages':['geochart']});
  google.charts.setOnLoadCallback(drawRegionsMap);
    var data = google.visualization.arrayToDataTable(gon.map_data);
    var options = { region: 'JP', resolution: 'provinces', width: '100%', height: 600 };
    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
    chart.draw(data, options);
});
```

shown.bs.modal（モーダル・ダイアログを開くshowメソッドを呼び出した時のイベント）を使っています。

再度ブラウザからリンクをクリックしてみます！
<img width="1280" alt="スクリーンショット 2020-07-25 23.40.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606118/8a155d63-2211-0519-e64f-8df970bd1074.png">


無事成功しました！

#参考
[Google maps APIを使ったmapをBootstrapのmodal上で表示させる](http://seto-abe.hatenablog.com/entry/2017/01/07/203445)