Select only one region at a time

Question

I am using jVectorMap to display an interactive map. Currently I can select multiple regions at the same time, but my requirement is to only allow the selection of one at a time. How can this be done?

$('#world-map').vectorMap({
    backgroundColor: '#0099FF',
    /* Hover color for each state */
    hoverColor: '#FCEF06',
    hover: {
        stroke: 'black',
        "stroke-width": 2,
        fill:'#FCEF06'
    },
    onRegionClick: function(event, code)
    {
        alert(code);
    },
    regionsSelectable: true,
    regionStyle: {
        fill:'black',
        selected: {
            fill: 'red'
        }
    },
});

<div id="world-map" style="width:750px; height:380px; float:left;"></div>

Answer 1

Along with the regionsSelectable property, there is also a regionsSelectableOne property to go with it.

Setting regionsSelectable to true lets you select the regions and setting regionsSelectableOne to true only allows one to be selected at a time.

jVectorMap Documentation

$('#world-map').vectorMap({
    backgroundColor: '#0099FF',
    /* Hover color for each state */
    hoverColor: '#FCEF06',
    hover: {
        stroke: 'black',
        "stroke-width": 2,
        fill:'#FCEF06'
    },
    onRegionClick: function(event, code)
    {
        alert(code);
    },
    regionsSelectable: true,
    regionsSelectableOne: true, //add this line here
    regionStyle: {
        fill:'black',
        selected: {
            fill: 'red'
        }
    } 
});