How do I set up this jquery-based US map using jquery?

Question

I am trying to incorporate the clickable jquery United States map from this site https://newsignature.github.io/us-map/ into a page I'm building in Sharepoint. I'm using a content editor web part, and embedding this code into it, but the map isn't showing up. As you can see from my code below, I have linked the javascript files that were included in the us-map-1.0.1.zip file that I downloaded from the site. I also uploaded the 2 svg maps from that zip package to the folder of the page I'm working on. I'm not sure how I am supposed to connect to those svg files, and how I can get this map to display. Is there anything I should do to modify this code?

<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>

Answer 1

OK, let´s start. First of all, it seems that your links are outdated or broken. https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js is not working. The files must be reachable.

Next point s that you are using javascript inside of style tags. That won't work.

After your links are fixed, try it like this:

 $(document).ready(function() { /** FIRST YOU HAVE TO INITIALIZE THE MAP **/ $('#map').usmap({ stateStyles: {fill: 'blue'}, 'click': function(event, data) { $('#clicked-state').text('You clicked:'+data.name ); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.0/raphael-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script> <script src="https://cdn.rawgit.com/NewSignature/us-map/0677afad/jquery.usmap.js"></script> <div id="map" style="width: 350px; height: 250px;"></div> <div id="clicked-state"></div>