Linking custom JS to custom HTML and CSS in Shopify 2.0

I have an SVG map that I’ve created for my store that I would like to have on its own separate page. The HTML and CSS seem to be working fine – when I hover over a state the state becomes highlighted and loses its highlight when I hover off of it.

I am trying to add custom JS to the theme.liquid file in the theme code settings so that when I hover over a state some information is displayed as a popup by the cursor. This worked perfectly for an old Shopify store I worked on with an older theme, but it doesn’t seem to work with Shopify 2.0. The info is no longer displayed overtop the map as a smooth popup, but shifts the entire map down and displays at the top of the screen.

How would I go about linking this custom JS to the HTML/CSS that I’ve put on the page for Shopify 2.0?

Here is the JS, exactly how I am adding it to the theme.liquid file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script>
$("path, circle").hover(function(e) {
  $('#info-box').css('display','block');
  $('#info-box').html($(this).data('info'));
});

$("path, circle").mouseleave(function(e) {
  $('#info-box').css('display','none');
});

$(document).mousemove(function(e) {
  $('#info-box').css('top',e.pageY-$('#info-box').height()-30);
  $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).mouseover();

var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(ios) {
  $('a').on('click touchend', function() { 
    var link = $(this).attr('href');   
    window.open(link,'_blank');
    return false;
  });
}
</script>

I’ve tried to “bundle” the JS code with the HTML/CSS on the product info page, creating a separate js.liquid file under “assets” in my theme code settings, and adding “defer=’defer'” to my JQuery info.