Google Geochart появляется только после обновления

Question

Я пытаюсь интегрировать Google GeoChart в мое приложение rails. В представлении я просто скопировал и вставил пример из Google:

Поверх документа у меня есть следующее:

<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>

Затем я добавляю div с идентификатором:

<div id="regions_div" style="width: 100%; height: 500px;"></div>

Но я получаю следующую ошибку:

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)

Ошибка исчезает при перезагрузке страницы, из-за чего я думаю, что она связана с Turbolinks.

Кто-нибудь знаете, как решить эту проблему, пожалуйста?

Answer 1

Я использовал следующее:

    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);

Answer 2

Страница не была полностью загружена, когда ваш код javascript начал работать, google.charts еще не был доступен, следовательно, ошибка Cannot read property 'load' of undefined.

Решение: оберните код javascript в слушатель, который запускается при загрузке страницы:

document.addEventListener("DOMContentLoaded", function(){
  google.charts.load('current', {
    // ...etc...
  });
});