JQV Map link regions to page URL

Question

Using JQV Maps from http://jqvmap.com/ and have this code (see below) to link a region to a page URL link.

jQuery('#africa-map').vectorMap({
    map: 'africa_en',
    backgroundColor: '#D1EEEE',
    color: '#c9dfaf',
    hoverColor: '#999999',
    showTooltip: true,
    selectedColor: '#9CBA7F',
    multiSelectRegion: true,
    selectedRegions: ['AO', 'ZA', 'MG', 'NA', 'ZW', 'ZM', 'UG', 'TZ', 'KE', 'RW', 'MW', 'MZ', 'BW'],

    onRegionClick: function (event, code, region) {
        switch (code) {
            case "AO":
                window.location.replace("http://www.google.com");
                break;
            case "ZA":
                window.location.replace("http://www.yahoo.com");
                break;
            case "MG":
                window.location.replace("http://www.bing.com");
                break;
        }
        // tells the click where to go ->   window.location = "http://www.google.com/";
    }
});

However this is not working. What is the error? Console log error say regionClickEvent is not defined so what do I do to define it?

this worked for me http://stackoverflow.com/questions/17459539/jqvmap-region-click-error — , Sep 04 '14 at 13:41

score 0 · Answer 1 · edited May 23 '17 at 11:49

Beside the error mentioned by Caudet, your switch is not working because the country codes received onRegionClick are lowercase.

switch (code) {
    case "ao":
        window.location = "http://www.google.com";
        break;
    case "za":
        window.location = "http://www.yahoo.com";
        break;
    case "mg":
        window.location = "http://www.bing.com";
        break;
}

Also, make sure you're loading the scripts on the correct order.

JQV Map link regions to page URL

1 Answers1