Selecting multiple areas

HTML

<script src="http://www.ammap.com/lib/3/ammap.js"></script>
<script src="http://www.ammap.com/lib/3/maps/js/usaHigh.js"></script>
<div id="info" style="">Click states to select</div>
<div id="mapdiv" style="width: 100%; height: 370px;"></div>

CSS

#info {
    font-family: Verdana;
    font-size: 12px;
    position: absolute; 
    top: 185px; 
    right: 20px; 
    height: 150px; 
    width: 150px; 
    padding: 7px;
    background-color: #fff; 
    opacity: 0.8;
    overflow: auto;
    z-index: 100;
}

JavaScript

var map;
AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.pathToImages = "http://www.ammap.com/lib/3/images/";
    map.panEventsEnabled = true;
    map.backgroundColor = "#6666";
    map.backgroundAlpha = 1;
    
    map.zoomControl.panControlEnabled = true;
    map.zoomControl.zoomControlEnabled = true;
    
    var dataProvider = {
        mapVar: AmCharts.maps.usaHigh,
        getAreasFromMap: true,
        areas: [
            
        ]
    };
    
    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);
            }
        }
        document.getElementById("info").innerHTML = "Selected states:<br />" + (states.length ? states.join(", ") : "none");
    });
    
    map.write("mapdiv");
});