Jvectormap very small on div change

Question

I have two divs, one with the world map and one with the US map. When the USA is clicked on the world map I want to hide that div and bring the US map into view.

This works but the map is tiny, even though the position of the zoom buttons indicates the size of the div is how it should be.

Any ideas?

If I have both divs set to "block" from the start they are both the correct size, it's only when invoking code to switch the div that it fails.

onRegionClick: function(event, code){
                        if (code == "US") { openUS('us-map') }
            },

  function openUS(a) {

    document.getElementById("world-map").style.display = 'none';
    document.getElementById(a).style.display = 'block';
  }

Answer 1

This issue is caused by the fact that you initialize map on the hidden element, whose size can't be calculated properly at that time. Try to change your logic so that jVectorMap would be initialized after the element becomes visible.