<html>
<head>
<script
type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"
></script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY',
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Weeks Stayed'],
['Italy', 2],
['GB', 8],
['Ireland', 1],
['United States', 52],
['Spain', 30],
['Portugal', 1],
['Canada', 1],
['France', 1],
['Japan', 2],
['Mexico', 30],
]);
var options = {
colorAxis: { colors: ['#a1b9ef', '#4374e0'] },
};
var chart = new google.visualization.GeoChart(
document.getElementById('regions_div')
);
chart.draw(data, options);
}
</script>
</head>
<style>
body {
margin: 0 auto;
width: 900px;
text-align: center;
}
</style>
<body>
<div id="regions_div" style="width: 900px; height: 500px"></div>
</body>
</html>
