Say, you have a map on your page. Perfect.
Now you want to add a little chart. Easy.
Finally you want the chart to go over the map, and, to further complicate things, want the chart to update it's data when user clicks particular countries on the map.
It may be easier than you think.
Placing the chart over the map is as simple as positioning <div> element over each other:
<div style="width: 100%; height: 362px; position: relative;"> <div id="chartdiv" style="width: 200px; height: 150px; position: absolute; bottom: 0; right: 0; z-index: 100;"></div> <div id="mapdiv" style="width: 100%; height: 362px; position: absolute; top: 0; left: 0;"></div> </div>
Now, in order to catch clicks on the countries we will use a handler for "clickMapObject" event, which will update chart's dataProvider property as well as set the appropriate label.
map.addListener("clickMapObject", function (event) {
if (event.mapObject.id != undefined && chartData[event.mapObject.id] != undefined) {
chart.dataProvider = chartData[event.mapObject.id];
chart.clearLabels();
chart.addLabel("0", "!20", event.mapObject.title, "center", 16);
chart.validateData();
}
});
And here's a working demo:
Upon clicking the map was not getting updated. The fiddle was missing selectable: true in the area settings.
hi Martynas
I wanted to display data in a <div> when the user clicks on a map object. as in when user clicks on the country Australia the div needs to be displayed under the map <div>.
<div id='mapdiv'></div>
<div id='mapdata'></div>
is this possible? appreciate your support in this regard
The map is not rendering now.