Edit in JSFiddle

// Define our regions using the two-letter country codes
var regions = [
	['gb', 'fr', 'de', 'es', 'it', 'nl', 'ie', 'be', 'pt', 'ch'],
    ['ca', 'us', 'mx'],
    ['no', 'fi', 'se'],
    ['au', 'nz', 'in', 'cn', 'jp'],
    ['za', 'na', 'bw', 'zw', 'mz', 'ao', 'zm', 'tz', 'mg']
];
var regionNames = [
	'Western Europe',
    'North America',
    'Scandinavia',
    'South East Asia',
    'Southern Africa'
];

$(function() {
	// Load the map SVG into the DOM so we can manipulate it
	$('.map').load('https://raw.githubusercontent.com/benhodgson/markedup-svg-worldmap/master/map.svg');
    
    $('.map').on('mouseleave', 'path, g', function() {
    	// When the mouse leaves an area, remove its classes
    	$('.map .active').removeClass('active');
        $.each(regions, function(index, region) {
        	$('group' + index).removeClass('group' + index);
        });
    }).on('mouseenter', 'path, g', function() {
    	// When the mouse enters an area, check to see if it's in a region
    	var thisCountry = $(this).attr('cc');
    	$.each(regions, function(regionIndex, region) {
        	if (region.indexOf(thisCountry) > -1) {
            	// Highlight all countries in the region
                $.each(region, function(index, country) {
                    $('.map [cc="' + country + '"]').addClass('active').addClass('group' + regionIndex);
                });
            }
        });
    }).on('click', 'path, g', function() {
    	// Show the region name when a country is clicked
    	if ($(this).attr('class')) {
        	alert(regionNames[$(this).attr('class').match(/[0-9]+/)[0]]);
        }    	
    });
});
<!-- This is where the map will be inserted -->
<span class="map"></span>
// Define our colour scheme as a list
$colors: cornflowerblue, indianred, forestgreen, gold, lightsalmon;

// Apply colour to the right group
@mixin path-colors {
    @for $i from 1 through length($colors) {
        .active.group#{$i - 1}, .active.group#{$i - 1} path {
            fill: nth($colors, $i);
        }
    }
}

.map {
    max-width: 100%;
    path {
        fill: #c0c0c0;
        stroke: none;
        cursor: no-drop;
        transition: fill 300ms ease;
    }
    .active, .active path {
        cursor: pointer;
    }
    @include path-colors();
}