If you can work the API, it’s easy enough to send data to it.
the thunkable github has documentation on this
start here
https://developers.google.com/maps/documentation/directions/usage-and-billing
then here
https://developers.google.com/maps/documentation/javascript/directions
then here
https://developers.google.com/maps/documentation/javascript/custom-markers
for example. i use this to make a bubblemap, i create the JSON data in my app. i transmit the data to the following HTML document stored on my github server space.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js"
type="text/javascript"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 900px;
border: 1px dotted #ddd;
margin: 1em auto;
}
</style>
</head>
<!--ThunkableWebviewerExtension.receiveMessage(function (message) {
try {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);
var mapData = message;
-->
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="chartdiv"></div>
<script>
ThunkableWebviewerExtension.receiveMessage(function (message) {
try {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);
var title = chart.titles.create();
title.text = "[bold font-size: 20]Current number of confirmed COVID19 cases per countery\nsource: https://api.covid19api.com/";
title.textAlign = "middle";
var mapData = message;
// Set map definition
chart.geodata = am4geodata_worldLow;
// Set projection
chart.projection = new am4maps.projections.Miller();
// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.exclude = ["AQ"];
polygonSeries.useGeodata = true;
polygonSeries.nonScalingStroke = true;
polygonSeries.strokeWidth = 0.5;
polygonSeries.calculateVisualCenter = true;
polygonSeries.events.on("validated", function () {
imageSeries.invalidate();
})
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
imageSeries.data = mapData;
imageSeries.dataFields.value = "value";
var imageTemplate = imageSeries.mapImages.template;
imageTemplate.nonScaling = true
imageTemplate.adapter.add("latitude", function (latitude, target) {
var polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id);
if (polygon) {
return polygon.visualLatitude;
}
return latitude;
})
imageTemplate.adapter.add("longitude", function (longitude, target) {
var polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id);
if (polygon) {
return polygon.visualLongitude;
}
return longitude;
})
var circle = imageTemplate.createChild(am4core.Circle);
circle.fillOpacity = 0.7;
circle.propertyFields.fill = "color";
circle.tooltipText = "{name}: [bold]{value}[/]";
imageSeries.heatRules.push({
"target": circle,
"property": "radius",
"min": 4,
"max": 30,
"dataField": "value"
})
/*
var label = imageTemplate.createChild(am4core.Label);
label.text = "{name}"
label.horizontalCenter = "middle";
label.padding(0, 0, 0, 0);
label.adapter.add("dy", function (dy, target) {
var circle = target.parent.children.getIndex(0);
return circle.pixelRadius;
})
*/
} catch (e) {
console.error("An error occurred. Message probably wasn't a JSON string of an array of numbers");
}
});
</script>
</body>
</html>```