Load another jvectormap on region click

Question

I'm trying to load the specific region map onRegionClick. However it seems as though the region is loading after the change is made. Here's my code:

function switchMap(code) {
    $.getScript('maps/'+ code +'.js');
    $('#map').vectorMap({map: code});
}

$('#map').vectorMap({
    map: 'world_mill_en',
    onRegionClick: function(event, code) {
        if (code == "CA") {switchMap(code)}
        if (code == "AF") {switchMap(code)}
        if (code == "AL") {switchMap(code)}
        if (code == "AR") {switchMap(code)}
        if (code == "CH") {switchMap(code)}
    }
});

The console output is this:

Uncaught Error: Attempt to use map which was not loaded: CA world-map.js:82

OPTIONS file:///C:/Users/D-4/Desktop/find-a-bible/maps/CA.js?_=1364318443130  jquery-1.8.2.js:8416

Answer 1

In order to use the switchMap function, you must initialize the new vectorMap after the file was fully loaded, thus intializing it in a callback. .

function switchMap(code) {
    $.getScript('maps/'+ code +'.js' , function (data){
        $('#map').vectorMap({map: code});
    });
}

Answer 2

you should only put the height or the width of the div to render the map properly. jvectormap will compute the missing dimension automatically to maintain the map aspect ratio. In case you are changing the height dynamically using javascript, make sure you call updateSize on your map object. Note that you can get the map object using this var mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject'); then call mapObject.updateSize();