title: Can't manage to get jVectorMap's getRegionName into div
body: <p>I've been trying all day long to get country information from jVectorMap <code>onClick</code> into another <code>&lt;div&gt;</code>. After some research I found out that I needed to make a <code>mapObject</code> to use <code>getRegionName</code> but I still can't get it to work (new to jQuery).
  Basically, I want to see a country's name in the div info-box after clicking on the country.</p>
  
  <p>Here's the map stuff:</p>
  
  <pre class="lang-js prettyprint-override"><code>jQuery(function(){
        var $ = jQuery;
     $('#focus-au').click(function(){
          $('#world-map').vectorMap('set', 'focus', 'AU');
        });
        $('#focus-us').click(function(){
          $('#world-map').vectorMap('set', 'focus', 3, 0.1, 0.4);
        });
        $('#focus-eu').click(function(){
          $('#world-map').vectorMap('set', 'focus', 3, 0.5, 0.3);
        });
        $('#focus-as').click(function(){
          $('#world-map').vectorMap('set', 'focus', 2.5, 0.72, 0.0025);
        });
        $('#focus-home').click(function(){
          $('#world-map').vectorMap('set', 'focus', 1, 0, 0);
        });
        $('#world-map').vectorMap({
          map: 'world_mill_en',
  
          focusOn: {
            x: 0.5,
            y: 0.5,
            scale: 1
          },
  
          backgroundColor: '#FFFFFF',
  
  
          onRegionClick: function(event, code) {
          var map = $('#world-map').vectorMap('get', 'mapObject');
          $('.info-box').html('&lt;span&gt;' + map.getRegionName(code) + '&lt;/span&gt;');
          },
           series: {
              regions: [{
                  values: clrData,
                  scale: ['#0071A4', '#C8EEFF'],
                  normalizeFunction: 'polynomial'
                      }]
              },
  
          onRegionLabelShow: function(e, el, code){
          el.html(el.html()+' (Cost of Living and Rent Index - '+clrData[code]+')');
          },
  
        });
      })
  </code></pre>
  
  <p>There's the div:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="info-box"&gt;&lt;h3&gt;Info Box&lt;/h3&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And finally the info-box' CSS (although I think it doesn't matter):</p>
  
  <pre class="lang-css prettyprint-override"><code>.info-box {
      line-height:30px;
      background-color:#fff;
      color: black;
      height:300px;
      width:100px;
      float:left;
      padding:5px; 
  }
  </code></pre>
  
  <p>In the mean time it suddenly worked, once, but after changing some stuff in the CSS (z-indexes and positions of world map and sidebar, which are overlapping each other) it stopped working again.</p>