リロードしないとJavaScriptが反映されない

実現したいこと

前提・発生している問題

Railsで投稿機能を作成しています。
地図から投稿を絞り込む機能を投稿一覧画面にJavaScriptで作成しましたが、投稿一覧に遷移しただけでは地図が表示されず、リロードしなければ表示されません。

該当のソースコード

app/views/books/index.html.erb

JavaScript

1<div class="container mx-auto my-3">2 <div id="regions_div" class="mx-auto" style="max-width: 900px; width: 90%"></div>3 <div class="my-5">4 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>5 <script>6 google.charts.load('current', {7 'packages':[8 'geochart'9 ],10 'mapsApiKey': '<%= ENV['GOOGLE_MAP_API'] %>'11 });12 13 // モデルをJSON.parseする14 const modeljson_parse = (item) => {15 item = JSON.stringify(item); // JSをjsonに置換16 item = item.substr(1, (item.length - 2)); // 切り出し(開始位置, 文字数)17 item = unEscapeHtml(item); // エスケープされたHTML文字を元に戻す関数18 item = JSON.parse(item); // JSON形式で書かれた文字列をJavaScriptのJSONオブジェクトに変換する19 return item;20 }21 22 // アンエスケープ処理、エスケープされた文字を元の文字に戻す23 const unEscapeHtml = (str) => {24 str = str.replace(/(&gt;)/g, '>');25 str = str.replace(/(&lt;)/g, '<');26 str = str.replace(/(&#092;)/g, '\\');27 str = str.replace(/(&quot;)/g, '"');28 str = str.replace(/(&#39;)/g, "'");29 str = str.replace(/(&amp;)/g, '&');30 return str 31 } 32 33 // 国がクリックされたら、国名コードをGETパラメータにして投稿一覧ページへ送る34 const selectHandler = (reg) => {35 let Country = modeljson_parse('<%=@country%>');36 let country = Country.find(country => country.country_code === reg.region)?.id;37 window.location.href = '/books?q%5Bcountry_id_eq%5D=' + country 38 }39 40 // 投稿データの有無で色分けをする41 const drawRegionsMap = () => {42 const book_countries = "<%= @book_countries %>";43 const codes = modeljson_parse(book_countries).map(book_country => {44 return [book_country.country_code, book_country.name]45 })46 codes.unshift(["Country", "Name"])47 const data = google.visualization.arrayToDataTable(codes);48 const options = {49 defaultColor:'#82AAE3', // 投稿データがある国の色50 datalessRegionColor:'#EFFFFD', // 投稿データがない国の色51 backgroundColor:'#afeeee'52 };53 const chart = new google.visualization.GeoChart(document.getElementById('regions_div'));54 55 google.visualization.events.addListener(chart, 'regionClick', selectHandler); //chartに対してregionClickイベントが起こりselectHandlerメソッドが実行される56 chart.draw(data, options);57 }58 59 google.charts.setOnLoadCallback(drawRegionsMap);60 </script>61 </div>62 <!-- 検索フォーム -->63 <%= render 'books/search_form', q: @q %>64 <!-- 投稿一覧 -->65 <% if @books.present? %>66 <div class="flex flex-wrap">67 <%= render @books %>68 </div>69 <% else %>70 <p class="mt-3 text-primary font-semibold"><%= t('.no_result') %></p>71 <% end %>72 <%= paginate @books %>73</div>

試したこと

調べたところ、こちらの記事にはTurboが原因であると書いてありました。
記事にはdocument.addEventListener("turbolinks:load", function() { $(function() {を加えるとありましたが、自分のコードのどこに記載すべきか分からずアドバイスいただきたいです。

補足情報

・Rails7
・地図の表示にはGoogleのGeo chart
を使用しています。

コメントを投稿

0 コメント