Javascript jVector地图显示在网站上，但代码未显示在HTML中

我正在研究web开发，作为我正在做的一个项目的一部分，我需要添加一个SVG映射。我已经成功地添加了新西兰的jVector地图，但无法以任何方式进行更改，因为地图的容器没有显示在HTML中，它只在我将鼠标悬停在地图上时显示在开发工具中。我不确定我会错在哪里

我一直试图在网上找到答案，但在任何地方都没有找到相同的问题，而且我的课程中似乎也没有人知道。我关注YouTube上的视频，但做的略有不同，因为在视频中，他们将所有内容都放在HTML页面上，包括任何JS或JQuery，在我的课程中，他们说这些内容应该保存在单独的文件中，所以我想知道这是否是问题的根源。不过，我确实尝试过将它直接放到HTML中，但得到了相同的结果

我希望能在#map div下看到API显示的所有地图信息，就像我在观看的演示视频中看到的那样。它显然连接正常，但我没有办法调整它上的任何东西

<!--JVECTOR SCRIPT TOP OF PAGE-->
    <link rel="stylesheet" href="assets/jsvector/jquery-jvectormap-2.0.3.css" type="text/css" media="all"/>
    <script src="assets/jsvector/jquery.js"></script>
    <script src="assets/jsvector/jquery-jvectormap-2.0.3.min.js"></script>
    <script src="assets/jsvector/jquery-jvectormap-nz-mill.js"></script>

<!--START OF JVECTOR MAP DIV EMPTY-->
               <div id="map">
                </div> 

            <!--END OF JVECTOR MAP-->

//SCRIPT KEPT IN SPEARATE FILE FROM HTML BUT REFERENCING #MAP IN HTML
$(function(){
      $('#map').vectorMap({map: 'nz_mill'});
    });