Añadir listado de países a jVectorMap

[JUMASOL]

Hola.

Estoy intentando hacer que en jVector pueda establecerse un listado de países que, en hover, activen las zonas.

Podéis ver el mapa que estoy usando en

http://jvectormap.com/maps/world/world/

Pues bien, se trataría de añadir un listado de países en cualqueir zona del mapa a modo de botones de tal suerte que pasando por encima el cursor cambien de color al tiempo que activan también las regiones.

He buscado y rebuscado, y encontrado este post:

http://stackoverflow.com/questions/1...using-a-button

Pero por más que intento insertar lo que dice en el código que tengo, no funciona de ninguna manera.

Parte del código es el que sigue. Si pudieseis explicar la solución que dan en stackoverlfow os lo agradecería

Código:

/**
 * jVectorMap version 0.2.3
 *
 * Copyright 2011-2012, Kirill Lebedev
 * Licensed under the MIT license.
 *
 */
(function( $ ){
  var apiParams = {
        colors: 1,
        values: 1,
        backgroundColor: 1,
        scaleColors: 1,
        normalizeFunction: 1
      },
      apiEvents = {
        onLabelShow: 'labelShow',
        onRegionOver: 'regionOver',
        onRegionOut: 'regionOut',
        onRegionClick: 'regionClick',
        onMarkerLabelShow: 'markerLabelShow',
        onMarkerOver: 'markerOver',
        onMarkerOut: 'markerOut',
        onMarkerClick: 'markerClick'
      };
      
  $.fn.vectorMap = function(options) {
    var defaultParams = {
          map: 'world_en',
          color: '#6383d3',
          hoverColor: '#323637',
          onRegionClick: function(event, code) {
        if (code === 'ES') {
            window.location = 'xxx'
        }
        else if (code === 'CA') {
            window.location = 'xxx'
        }
        else if (code === 'US') {
            window.location = 'xxx'
        }
    },
          normalizeFunction: 'linear'
        },
        
        map,
        methodName,
        event;

    if (options === 'addMap') {
      WorldMap.maps[arguments[1]] = arguments[2];
    } else if (options === 'set' && apiParams[arguments[1]]) {
      methodName = arguments[1].charAt(0).toUpperCase()+arguments[1].substr(1);
      this.data('mapObject')['set'+methodName].apply(this.data('mapObject'), Array.prototype.slice.call(arguments, 2));
    } else {
      $.extend(defaultParams, options);
      defaultParams.container = this;
      this.css({
        position: 'relative',
        overflow: 'hidden'
      });
      map = new WorldMap(defaultParams);
      this.data('mapObject', map);
      for (event in apiEvents) {
        if (defaultParams[event]) {
          this.bind(apiEvents[event]+'.jvectormap', defaultParams[event]);
        }
      }
    }
  };
  
  
  var VectorCanvas = function(width, height) {
    this.mode = window.SVGAngle ? 'svg' : 'vml';
    if (this.mode == 'svg') {
      this.createSvgNode = function(nodeName) {
        return document.createElementNS(this.svgns, nodeName);
      }
    } else {
      try {
        if (!document.namespaces.rvml) {
          document.namespaces.add("rvml","urn:schemas-microsoft-com:vml");
        }
        this.createVmlNode = function (tagName) {
          return document.createElement('<rvml:' + tagName + ' class="rvml">');
        };
      } catch (e) {
        this.createVmlNode = function (tagName) {
          return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
        };
      }
      document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
    }
    if (this.mode == 'svg') {
      this.canvas = this.createSvgNode('svg');
    } else {
      this.canvas = this.createVmlNode('group');
      this.canvas.style.position = 'absolute';
    }
    this.setSize(width, height);
  }

  VectorCanvas.prototype = {
    svgns: "http://www.w3.org/2000/svg",
    mode: 'svg',
    width: 0,
    height: 0,
    canvas: null,

........................