I am trying to display city name text over the map along with the region gradient. In other words, I need to combine below attached maps. I did some searching online and used chatGPT but none worked. I have included the workaround I have done. I don't mind if it can achieved with any other tools but Google geoCharts is preferred. Thanks in advance.
the workaround I have done
<!DOCTYPE html>
<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'],
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Country', 'Population'],
['United States', 330000000],
['Germany', 83000000],
['France', 67000000]
]);
var options = {
displayMode: 'regions',
resolution: 'countries',
colorAxis: {colors: ['#ece7f2', '#d6604d']}
};
var chart = new google.visualization.GeoChart(document.getElementById('geo_chart'));
chart.draw(data, options);
}
</script>
<style>
#geo_chart {
position: relative;
width: 100%;
height: 600px;
z-index: -1;
}
.country-label {
position: absolute;
font-size: 12px;
font-weight: bold;
color: #000;
pointer-events: none;
z-index: 999;
}
</style>
</head>
<body>
<div id="geo_chart">
<div class="country-label" style="top: 40%; left: 35%;">United States</div>
<div class="country-label" style="top: 48%; left: 60%;">Germany</div>
<div class="country-label" style="top: 52%; left: 55%;">France</div>
</div>
</body>
</html>