Sto cercando di creare una pagina WEB dinamica, in cui sono visualizzati tre schede realizzate in Javascript.
Semplicemente, cliccando sul nome di una scheda si visualizza il <DIV> relativo.
All'interno del <DIV> associato alla scheda, è presente un altro <DIV> che contiene una mappa realizzata con libreria JVectorMap (quindi sempre Javascript).
La pagina non funziona in quanto solo una scheda mi mostra la mappa, le altre due schede o non mostrano nulla (con Firefox) o mostrano una mappa di dimensioni minuscole (con Chrome).
Il codice e i file CSS sono i seguenti:

codice HTML:
<html>
<head>
  <title>TITLE</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

  <link href="css/graphtabs.css" rel="stylesheet" type="text/css">

  <link rel="stylesheet" href="css/jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>
  <script src="include/jquery-1.9.1.js"></script>
  <script src="include/jquery-jvectormap-2.0.3.min.js"></script>
  <script src="include/jquery-jvectormap-world-mill-en.js"></script>
  <script src="data.js"></script>
</head>

<body>
        <ul class="tab">
            <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'world-map-gdp_1')" id="ntrOpen">TAB 1</a></li>
            <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'world-map-gdp_2')" id="unityOpen">TAB 2</a></li>
            <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'world-map-gdp_3')" id="equaOpen">TAB 3</a></li>
        </ul>

        <div id="world-map-gdp_1" style="width: 1200px; height: 800px" class="tabcontent"></div>
        <script>
            $(function(){
                $('#world-map-gdp_1').vectorMap({
                      map: 'world_mill_en',
                      backgroundColor:  "#0080FF",
                      series: {
                        regions: [{
                          values: Color,
                          scale: ['#FFFFFF', '#FF0000'],
                          normalizeFunction: 'linear'
                        }]
                      },
                    });

            });
        </script>


        <div id="world-map-gdp_2" style="width: 1200px; height: 800px" class="tabcontent"></div>
        <script>
            $(function(){
                $('#world-map-gdp_2').vectorMap({
                      map: 'world_mill_en',
                      backgroundColor:  "#0080FF",
                      series: {
                        regions: [{
                          values: Color,
                          scale: ['#FFFFFF', '#FF0000'],
                          normalizeFunction: 'linear'
                        }]
                      },
                    });

            });
        </script>

        <div id="world-map-gdp_3" style="width: 1200px; height: 800px" class="tabcontent"></div>
        <script>
            $(function(){
                $('#world-map-gdp_3').vectorMap({
                      map: 'world_mill_en',
                      backgroundColor:  "#0080FF",
                      series: {
                        regions: [{
                          values: Color,
                          scale: ['#FFFFFF', '#FF0000'],
                          normalizeFunction: 'linear'
                        }]
                      },
                    });

            });
        </script>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

document.getElementById("ntrOpen").click();
</script>

</body>
</html>


*************************************************
******      graphtabs.css       *********
*************************************************


/* Style the list */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}


*************************************************
****************     data.js    *****************
*************************************************

var TMEDIO = {
"AF": [0, "ok"],
"AL": [94, "ok"],
"DZ": [90, "ok"]
};
var PERCOLTREMAX = {
"AF": [0, "ok"],
"AL": [1, "ok"],
"DZ": [1, "ok"]
};
var TOTREG = {
"AF": [62, "ok"],
"AL": [1947, "ok"],
"DZ": [371, "ok"]
};
var Color = {
"AF": [0, "ok"],
"AL": [0, "ok"],
"DZ": [0, "ok"]
};


*************************************************
******    jquery-jvectormap-2.0.3.css   *********
*************************************************

svg {
    touch-action: none;
}

.jvectormap-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    touch-action: none;
}

.jvectormap-tip {
    position: absolute;
    display: none;
    border: solid 1px #CDCDCD;
    border-radius: 3px;
    background: #292929;
    color: white;
    font-family: sans-serif, Verdana;
    font-size: smaller;
    padding: 3px;
}

.jvectormap-zoomin, .jvectormap-zoomout, .jvectormap-goback {
    position: absolute;
    left: 10px;
    border-radius: 3px;
    background: #292929;
    padding: 3px;
    color: white;
    cursor: pointer;
    line-height: 10px;
    text-align: center;
    box-sizing: content-box;
}

.jvectormap-zoomin, .jvectormap-zoomout {
    width: 10px;
    height: 10px;
}

.jvectormap-zoomin {
    top: 10px;
}

.jvectormap-zoomout {
    top: 30px;
}

.jvectormap-goback {
    bottom: 10px;
    z-index: 1000;
    padding: 6px;
}

.jvectormap-spinner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: center no-repeat url(data:image/gif;base64,...);
}

.jvectormap-legend-title {
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}

.jvectormap-legend-cnt {
    position: absolute;
}

.jvectormap-legend-cnt-h {
    bottom: 0;
    right: 0;
}

.jvectormap-legend-cnt-v {
    top: 0;
    right: 0;
}

.jvectormap-legend {
    background: black;
    color: white;
    border-radius: 3px;
}

.jvectormap-legend-cnt-h .jvectormap-legend {
    float: left;
    margin: 0 10px 10px 0;
    padding: 3px 3px 1px 3px;
}

.jvectormap-legend-cnt-h .jvectormap-legend .jvectormap-legend-tick {
    float: left;
}

.jvectormap-legend-cnt-v .jvectormap-legend {
    margin: 10px 10px 0 0;
    padding: 3px;
}

.jvectormap-legend-cnt-h .jvectormap-legend-tick {
    width: 40px;
}

.jvectormap-legend-cnt-h .jvectormap-legend-tick-sample {
    height: 15px;
}

.jvectormap-legend-cnt-v .jvectormap-legend-tick-sample {
    height: 20px;
    width: 20px;
    display: inline-block;
    vertical-align: middle;
}

.jvectormap-legend-tick-text {
    font-size: 12px;
}

.jvectormap-legend-cnt-h .jvectormap-legend-tick-text {
    text-align: center;
}

.jvectormap-legend-cnt-v .jvectormap-legend-tick-text {
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
    padding-left: 3px;
}
Il codice è completo (si può quindi usare per testarlo), qualcuno può dirmi perchè non funziona?

Grazie
ciao
giorgio