Ошибка при загрузке пакета Google Chart при добавлении фрагмента HTML в мой проект

Question

Я получаю следующую ошибку в консоли chrome, когда пытаюсь вписаться ниже указанного HTML фрагмента (для создания диаграммы Google) в моем существующем проекте -

Вот ошибка -

Uncaught TypeError: Cannot redefine property: Map
    at defineProperty (<anonymous>)
    at gvjs_bc (jsapi_compiled_format_module.js:13)
    at jsapi_compiled_format_module.js:28
gvjs_bc @ jsapi_compiled_format_module.js:13
(anonymous) @ jsapi_compiled_format_module.js:28
jsapi_compiled_default_module.js:33 Uncaught TypeError: Cannot read property 'Xc' of undefined
    at jsapi_compiled_default_module.js:33
(anonymous) @ jsapi_compiled_default_module.js:33
jsapi_compiled_ui_module.js:31 Uncaught TypeError: Cannot set property 'platform' of undefined
    at jsapi_compiled_ui_module.js:31
(anonymous) @ jsapi_compiled_ui_module.js:31
jsapi_compiled_format_module.js:33 Uncaught TypeError: Cannot use 'in' operator to search for 'google' in undefined
    at gvjs_k (jsapi_compiled_format_module.js:33)
    at jsapi_compiled_corechart_module.js:1
gvjs_k @ jsapi_compiled_format_module.js:33
(anonymous) @ jsapi_compiled_corechart_module.js:1
jsapi_compiled_ui_module.js:245 Uncaught TypeError: Cannot set property 'goog-combobox-item' of undefined
    at gvjs_IC (jsapi_compiled_ui_module.js:245)
    at jsapi_compiled_controls_module.js:34

и вот мой HTML фрагмент кода, который я пытаюсь вписать, используя $ ('# some_id'). html ()

      <!-- detail section start -->
    <section class='section-padding'>
        <div class='container'>
            <div class='row'>
                <div class='col-12'>
                    <div>
                        <h2 class='text-blue main-title'>Current v/s Previous year selling</h2>
                    </div>
                </div>
            </div>
            <div class='row'>
                <div class='col-lg-12'>
                    <!-- start:: Chart card -->
                    <div class='card-blk chart-card d-flex flex-column'>
                        <div class='card flex-grow-3'>
                            <div class='card-title'>
                                <h6 class='text-center'>
                                    Customers
                                </h6>
                            </div>
                            <div class='card-content text-center'>
                                <div id='chartElement3'>

<script type='text/javascript'>

google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawElement3Dashboard);

function drawElement3Dashboard() {
if(document.readyState == "complete") {
    console.log('code loaded');
} else {
    console.log('code not loaded yet');
}

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_3'));
    var controller = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter','containerId': 'filter_div_3','options': {'filterColumnLabel':'Current Turnover'}});

    var data = new google.visualization.DataTable();
    data.addColumn('string','customer_profile_value');
    data.addColumn('number','Current Turnover');
    data.addColumn({type:'string', role:'annotation'});
    data.addColumn('number','Last year Turnover');
    data.addColumn({type:'string', role:'annotation'});
    data.addRows([['A+',19.9, '19.9', 18.2, '18.2'],['A',5.5, '5.5', 5.4, '5.4'],['B',2.4, '2.4', 2.3, '2.3'],['C',1.0, '1.0', 1.0, '1.0'],['C-',0.3, '0.3', 0.3, '0.3']]);

    var colChart = new google.visualization.ChartWrapper({'chartType': 'ColumnChart','containerId': 'chart_div_3',
'options': {
    'height': '100%',
    'width':'100%',
'annotations': {'alwaysOutside': 'null','highContrast': 'true','textStyle': {'fontName': 'Times-Roman','fontSize': 9,'color': '#000000','opacity': 1}},
'legend' :{'position' :'bottom','alignment' :'center','element_legend_text' :'',},
'colors' :['#65A1DD','#9FC2EA','#919191','#CBCBCB','#E0E0E0','#717171','#C2D8F1'],
'enableInteractivity' :'true',
'forceIFrame' :'false',
'reverseCategories' :'false',
'tooltip' :'',
'slices' :'10',
'animation': { 'duration' :'2000',
'easing' :'linear',
'startup' :'true',
'alwaysOutside' :'',},
'bar': { 'groupWidth' :'61.8%',},
'hAxis': { 'direction':'1','format' :'short','gridlines': { 'count' :'-1','units' :'',},'logScale ':'false','scaleType' :'','textPosition' :'out','title' :'',},
'isStacked' :'false',
'orientation' :'horizontal',
'vAxis': { 'direction' :'1','format' :'short','gridlines': { 'count' :'4','units' :'',},'logScale' :'false','scaleType' :'','textPosition' :'out','title' :'','viewWindow':{'min':'0',}}
}});
    dashboard.bind(controller, colChart);
    dashboard.draw(data);
}
</script>

<div id='dashboard_div_3'>
                                        <div id='filter_div_3' style='display: none;'></div>
                                        <div id='chart_div_3'>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h6 class='card-subtitle'>
                            User: Company name
                        </h6>
                    </div>
                    <!-- end:: Chart card -->
                </div>
            </div>
            <!-- Start:: Copyright and page text -->
            <div class='row mt-auto pt-3'>
                <div class='col-12'>
                    <div class='copyright-text d-flex justify-content-between'>
                        <span>Company Name</span>
                        <span>Page 1</span>
                    </div>
                </div>
            </div>
            <!-- End:: Copyright and page text -->
        </div>
    </section>
    <!-- detail section end -->

, если я запускаю этот HTML как отдельная страница, она работает без ошибок. Есть идеи об этом странном поведении?