Google Maps
info
Supported since Apache ECharts visualization panel 3.8.0.
Google Maps are loaded using Maps API and require Access Key. You can get it from https://console.cloud.google.com/apis/credentials.
- Loading Google Maps takes ~1-2 seconds.
- The callback function
gmapReady
will be executed on load. The name can be changed in the Panel options. - While loading, animation can be displayed using the following code.

Function
const gmap = {
gmap: {
/**
* Center and Zoom
*/
center: { lng: -81.76, lat: 27.99 },
zoom: 4,
// whether echarts layer should be rendered when the map is moving. `true` by default.
// if false, it will only be re-rendered after the map `moveend`.
// It's better to set this option to false if data is large.
renderOnMoving: true,
},
series: [
{
type: "scatter",
coordinateSystem: "gmap",
// data items [[lng, lat, value], [lng, lat, value], ...]
data: [[-81.76, 27.99, 100]],
encode: {
// encode the third element of data item as the `value` dimension
value: 2,
lng: 0,
lat: 1,
},
},
],
};
/**
* Loading
*/
const loading = {
graphic: {
elements: [
{
type: "group",
left: "center",
top: "center",
children: new Array(7).fill(0).map((val, i) => ({
type: "rect",
x: i * 20,
shape: {
x: 0,
y: -40,
width: 10,
height: 80,
},
style: {
fill: "#5470c6",
},
keyframeAnimation: {
duration: 1000,
delay: i * 200,
loop: true,
keyframes: [
{
percent: 0.5,
scaleY: 0.3,
easing: "cubicIn",
},
{
percent: 1,
scaleY: 1,
easing: "cubicOut",
},
],
},
})),
},
],
},
};
/**
* Maps are Ready
*/
window.gmapReady = () => {
notifySuccess(["Google Maps", "Loaded..."]);
echartsInstance.setOption(gmap, (notmerge = true));
};
return typeof google === "object" && typeof google.maps === "object"
? gmap
: loading;