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

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

• javascript
• jquery
• jvectormap

• Check if you have jquery-jvectormap-us-mill-en.js"> in your page. – You Know Nothing Jon Snow Commented Oct 19, 2013 at 12:57

2 Answers 2

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});
    });
}

you should only put the height or the width of the div to render the map properly. jvectormap will pute 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();