Displaying images in map rollover balloons
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/dark.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
background: #3f3f4f;
color:#ffffff;
width : 100%;
height : 500px;
}
JavaScript
var map = AmCharts.makeChart("chartdiv", {
"type": "map",
"theme": "dark",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataProvider": {
"map": "worldLow",
"areas": [{
id: "FR",
customData: "<img src='http://placekitten.com/80/80' style='width: 80px; height: 80px;' />"
}]
},
"areasSettings": {
"autoZoom": true,
"balloonText": "[[customData]]",
"selectedColor": "#CC0000"
}
});