Selecting multiple areas map on high detail world map

by amcharts

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/worldHigh.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 500px;
}

JavaScript

var map;
AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.pathToImages = "http://www.amcharts.com/lib/3/images/";
    map.panEventsEnabled = true;
    map.backgroundColor = "#666666";
    map.backgroundAlpha = 1;
    
    map.zoomControl.panControlEnabled = true;
    map.zoomControl.zoomControlEnabled = true;
    
    var dataProvider = {
        map: "worldHigh",
        getAreasFromMap: true
    };
    
    map.dataProvider = dataProvider;
    
    map.areasSettings = {
        autoZoom: false,
        color: "#CDCDCD",
        colorSolid: "#5EB7DE",
        selectedColor: "#5EB7DE",
        outlineColor: "#666666",
        rollOverColor: "#88CAE7",
        rollOverOutlineColor: "#FFFFFF",
        selectable: true
    };
    
    map.addListener('clickMapObject', function (event) {
        // deselect the area by assigning all of the dataProvider as selected object
        map.selectedObject = map.dataProvider;
        
        // toggle showAsSelected
        event.mapObject.showAsSelected = !event.mapObject.showAsSelected;
        
        // bring it to an appropriate color
        map.returnInitialColor(event.mapObject);
        
        // let's build a list of currently selected states
        var states = [];
        for (var i in map.dataProvider.areas) {
            var area = map.dataProvider.areas[i];
            if (area.showAsSelected) {
                states.push(area.title);
            }
        }        
    });
    
    map.write("chartdiv");
});