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:

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

			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);
When calling the function in my page's body with:
<div id='MAPHERE'></div>
it outputs the map just fine.

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

Any idea why?

I'm basically doing this.

What am I doing wrong?

Thank you.