Hi there,
beginner here.

I'm trying to create a very simple webpage using Googles Geocharts which is written in JavaScript.

More specifically I'm using this script from Geochart which simply outputs a world map in which the US is highlighted:
Code:
<head>

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
	
	<script type='text/javascript'>
	  
		function geochart() {
		  
			google.load('visualization', '1', {'packages': ['geochart']});
			google.setOnLoadCallback(drawMarkersMap);

			function drawMarkersMap() {
				var data = new google.visualization.DataTable();
					data.addColumn('string', 'City');
					data.addColumn('number', 'color');
					data.addRows([['USA', 1]]);

				var options = {
					region: 'world',
					displayMode: 'regions',
					colorAxis: {colors: ['white', 'red']},
					backgroundColor: 'cyan',
					legend: 'none',
					height: 347,
					width: 556
					};

				var chart = new google.visualization.GeoChart(document.getElementById('MAPHERE'));
					chart.draw(data, options);
			};
		}
		
	</script>
</head>
When calling the function in my page's body with:
Code:
<body>
<div id='MAPHERE'></div>
<script>geochart();</script>
</body>
it outputs the map just fine.

But when instead I try to call the function using an event listener:
Code:
<body>
<div id='MAPHERE'></div>
<button type="button" value="Highlight US" onclick="geochart()">
</body>
it doesn't work.

Any idea why?

I'm basically doing this.

What am I doing wrong?

Thank you.