Javascript 如何使用jquery设置这个基于jquery的美国地图？

我正在尝试将这个网站上的可点击jquery美国地图合并到我正在Sharepoint中构建的页面中。我正在使用一个内容编辑器web部件，并将此代码嵌入其中，但地图没有显示出来。从下面的代码中可以看到，我链接了从网站下载的us-map-1.0.1.zip文件中包含的javascript文件。我还将该zip包中的2个svg映射上传到我正在处理的页面的文件夹中。我不确定我应该如何连接到这些svg文件，以及如何显示此地图。我应该做些什么来修改这个代码吗

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>     <!--this version works with IE-->
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js"></script>
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/raphael.js"></script>
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/color.jquery.js"></script>

<script>

$(document).ready(function() {

$('#map').usmap({
  // The click action
  click: function(event, data) {
    $('#clicked-state')
      .text('You clicked: '+data.name)
      .parent().effect('highlight', {color: '#C7F464'}, 2000);
  }
});

});

</script>



<style>

$('#map').usmap({
    stateStyles: {fill: 'blue'}
});

</style>


<div id="map" style="width: 350px; height: 250px;"></div>
<div id="clicked-state"></div>

$（文档）.ready（函数（）{
$（'#map'）.usmap({
//单击操作
单击：功能（事件、数据）{
$（“#单击状态”）
.text（'您单击：'+data.name）
.parent（）.effect（'highlight'，{color:'#C7F464'}，2000年）；
}
});
});
$（'#map'）.usmap({
stateStyles:{fill:'blue'}
});

好的，我们开始吧。 首先，你的链接似乎已经过时或中断。 它不起作用。 这些文件必须是可访问的

下一点是，您正在样式标记内部使用javascript。 那不行

链接修复后，请按以下方式尝试：

$（文档）.ready（函数（）{
/**首先，您必须初始化映射**/
$（'#map'）.usmap({
状态样式：{fill:'blue'}，
“单击”：函数（事件、数据）{
$（'#clicked state'）.text（'您单击：'+data.name）；
}
});
});