Getting Uncaught ReferenceError: google is not defined while using GeoCharts Visualization API with Angular-Google-Charts

I am trying to use the GeoCharts API (a part of Google Charts) in my Angular component. The specific code that I’m referencing for this purpose is: https://developers.google.com/chart/interactive/docs/gallery/geochart#coloring-your-chart.

I am using the Angular-Google-Charts package as specified here: https://www.npmjs.com/package/angular-google-charts

More specifically, I want to be able to display a chart of multiple countries in my HTML template which will have each country highlighted with a different shade or color as you can see on the link specified.

I tried using the code in the API docs which leads me to this error:

ERROR Error: Uncaught (in promise): ReferenceError: google is not defined
ReferenceError: google is not defined
    at new GeoChartsComponent (geo-charts.component.ts:52)
    at createClass (core.js:31985)
    at createDirectiveInstance (core.js:31807)
    at createViewNodes (core.js:44210)
    at createRootView (core.js:44082)
    at callWithDebugContext (core.js:45632)
    at Object.debugCreateRootView [as createRootView] (core.js:44848)
    at ComponentFactory_.create (core.js:30788)
    at ComponentFactoryBoundToModule.create (core.js:25731)
    at ViewContainerRef_.createComponent (core.js:30995)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

Here’s the code in my GeoChartsComponent:

export class GeoChartsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    google.charts.load('current', { 'packages': ['geochart']});
    google.charts.setOnLoadCallback(this.drawRegionsMap);
  }

  drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
      ['Country',   'Latitude'],
      ['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],
      ['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],
      ['Canary Islands', 28], ['Cape Verde', 15],
      ['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],
      ['Comoros', -12], ['Cote d'Ivoire', 6],
      ['Democratic Republic of the Congo', -3], ['Djibouti', 12],
      ['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],
      ['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],
      ['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],
      ['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', null],
      ['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],
      ['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],
      ['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],
      ['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],
      ['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],
      ['São Tomé and Principe', 0], ['Senegal', 15],
      ['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],
      ['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],
      ['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],
      ['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],
      ['Zimbabwe', -18]
    ]);
  }

  options = {
    region: '002', // Africa
    colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
    backgroundColor: '#81d4fa',
    datalessRegionColor: '#f8bbd0',
    defaultColor: '#f5f5f5',
  };

  chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
  chart.draw(data, options);            // this line fails to compile with multiple errors.

My HTML template for the same component simply contains:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;">
</div>

Can I get some help in getting my code working?

Also here’s a StackBlitz I created just in case you prefer it:
https://stackblitz.com/edit/angular-lamnq7

Source: New feed
Source Url Getting Uncaught ReferenceError: google is not defined while using GeoCharts Visualization API with Angular-Google-Charts