jVectorMap generates a 100x100 when display object is initially hidden

Question

So I'm having a problem generating my jVectorMap.

The map itself sits inside a very custom drop down menu that I have created and this is where I suspect the problem is.

When I mouseover my menu item to open up the drop down which contains the map the actual svg starts out with a forced dimension of 100px x 100px.

What I have tried to do a number of workarounds wher I call the "map.setSize()" either on the mouseclick event of the dropdown as well as the mouseover event of the container itself. The problem here is my dropdown is not subject to a click event but shows on the mouseover event. However, at the point of the mouseover event the actual container for the map hasn't loaded so I'm still stuck with a 100px x 100px svg.

To get around this I've put an event on the mouseover event of the container itself but this isn't great either as it then requires the user to move his mouse over the container before it actually shows the map, something I don't want to happen.

Is there a way of getting the map built inside a div which is invisible before my menu event occurs?

For an example of my problem I've created this at jsfiddle http://jsfiddle.net/AEup9/

You will notice that when you hover over the "Show Map" menu item (the only item) the drop down is blank except for the topic headers until you move the mouse over the actual drop down itself which then reloads the map. I then keep the map there by using my "loaded" variable created before my mouseover event and a force map.setSize() inside the same event:

var loaded = false;
$('#aamap').mouseover(function () {
    if (!loaded) {
        (function () {
            map = new jvm.WorldMap({
                map: 'za_mill_en',
                container: $('#southafrica-map'),
                backgroundColor: '#cbd9f5',
                initial: {
                    fill: 'white'
                },
                series: {
                    regions: [{
                        attribute: 'stroke'
                    }]
                }
            });

            loaded = true;

        })();
    }
    map.setSize();
});

This is my rough work around but not what I really want as I want the map to show up first time.

Can anyone help me here?

Edit: I finally decided to NOT go ahead with using jvectormap due to this issue. Instead I opted to use jqvmap which is to some degree a fork of jvectormap, however the issues experienced with jvectormap were no longer a problem.

Answer 1

I met this issue as well. To solve that problem we need to run an updateSize method on a map object when container of our map becomes visible. First, to get the map object we need to use this command: $('#world-map').vectorMap('get', 'mapObject') and when execute updateSize on it, like:

var map = $('#world-map').vectorMap('get', 'mapObject');
map.updateSize();

or in a shorter form:

$('#world-map').vectorMap('get', 'mapObject').updateSize();