I am trying to use google charts in an ReactJS application. I do not want to use "react-google-chart.
While i try to run it, in my console theres an error saying google is not defined. Here is my current code
In my index.html
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<title>React App</title>
</head>
And the component to use the chart map looks like this:
import React from 'react';
google.charts.load('upcoming', {
'packages': ['geochart']
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Accent'],
['Baja California', 100],
['Sonora', '100'],
['Chihuahua', '100'],
['Coahuila', '100'],
['Nuevo León', '100'],
['Tamaulipas', '100'],
['Sinaloa', '100'],
['Nayarit', '100'],
['Durango', '100'],
['Zacatecas', '400'],
['Jalisco', '400'],
['Colima', '400'],
['Tlaxcala', '400'],
['Aguascalientes', '400'],
['Zacatecas', '400'],
['San Luis Potosí', '400'],
['Puebla', '400'],
['Guanajuato', '400'],
['Querétaro', '400'],
['Hidalgo', '400'],
['Morelos', '400'],
['Estado de México', 400],
['Distrito Federal', 400],
['Baja California Sur', '200'],
['Michoacán', '200'],
['Guerrero', '200'],
['Oaxaca', '200'],
['Veracruz', '200'],
['Tabasco', '200'],
['Campeche', '300'],
['Chiapas', '200'],
['Quintana Roo', '300'],
['Yucatán', '300']
]);
var options = {
region: 'MX', // Mexico
resolution: 'provinces',
colorAxis: {
// minValue=100,
// maxValue=400,
values: [100, 200, 300, 400],
colors: ['white', 'white', 'white', 'white']
},
backgroundColor: '#81d4fa',
datalessRegionColor: '#eeeeee',
defaultColor: '#f5f5f5',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
return(
<div id="geochart-colors" style="width: 700px; height: 433px;"></div>
);
};
My app should look like this https://jsfiddle.net/9fhL2nsv/
question from:
https://stackoverflow.com/questions/65602687/use-google-charts-in-reactjs-project 
