Using map events to catch clicked object information
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="info">Click the country to display it's information</div>
<div id="chartdiv"></div>
CSS
body {
font-family: Verdana;
font-size: 12px;
padding: 10px;
}
#chartdiv {
width : 100%;
height : 500px;
}
#info {
opacity: 0.9;
background: #ccc;
padding: 10px;
}
JavaScript
var map = AmCharts.makeChart("chartdiv", {
"type": "map",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true
},
"areasSettings": {
"autoZoom": false,
"selectedColor": "#CC0000",
"selectable": true
},
"smallMap": {}
});
map.addListener("clickMapObject", function (event) {
document.getElementById("info").innerHTML = 'Clicked ID: ' + event.mapObject.id + ' (' + event.mapObject.title + ')';
console.log("click",event);
});