Google Geochart only appears after a refresh - ruby-on-rails

Question

I am trying to integrate Google GeoChart to my rails application. In the view i simply copied-pasted the example from Google:
On top of the document i have the following:
<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>
Then I add the div with the id:
<div id="regions_div" style="width: 100%; height: 500px;"></div>
But i get the following error:
VM17084:3 Uncaught TypeError: Cannot read property 'load' of undefined
at <anonymous>:3:21
at o.assignNewBody (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
at o.replaceBody (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
at turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
at o.e.renderView (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
at o.render (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
at Function.e.render (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
at t.renderSnapshot (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
at t.render (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
at r.render (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
The error disapears when I reload the page, which makes me thinks that it is related to Turbolinks.
Does anybody know how to fix this issue please ?

Answer 1

The page wasn't fully loaded when your javascript code started to run, google.charts was not available yet, hence the Cannot read property 'load' of undefined error.
Solution: Wrap your javascript code in a listener that fires when the page is loaded:
document.addEventListener("DOMContentLoaded", function(){
google.charts.load('current', {
// ...etc...
});
});

Answer 2

I ended up using the following:
setTimeout(function() {
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 rubydata = JSON.parse('<%= #user_origin.to_json.html_safe -%>')
data = [["Country","Value"]].concat(rubydata)
var data = google.visualization.arrayToDataTable(data);
var options = {
legend: {position: 'none'},
colors: <%= raw #palette_final.to_json %>
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
} }, 1000);