Javascrip library not working in WP header, otherwise yes

I’m using Imagemap resizer js library to help me with responsive maps. It’s controled by a small js library from here https://github.com/davidjbradshaw/image-map-resizer. It’s supposed to help the HTML coord become responsive even when it usually isn’t (such as ios Chrome).

To start off testing, I’ve copies the entire example page from the author of the script int o a static html page at
https://www.talesofyore.com/wp-content/themes/twentyfifteen-child/map.htm.
I’ve used the following code right before the /body:

` <script type=”text/javascript” src=”https://davidjbradshaw.com/imagemap-resizer/js/imageMapResizer.min.js”></script&gt;
<script type=”text/javascript”>
$(‘map’).imageMapResize();
</script>`
As you can see, it creates the html coords properly.

However, when I try adding it to my WordPress theme header, it creates the coords, but they are all located at the same line in the center below the image (i’ve styled a couple of them with blue border so you can see them . https://www.talesofyore.com/?p=1#comment-1

Here’s what I’ve tried so far:
If I hardcode the code (img code, map code and javascript code) directly after the /head, everything works fine.

However, when does’t it work:
– If I enqueue into my WP is by using enqueue

wp_enqueue_script( 'imagemapresizer', get_template_directory_uri() . '/js/imageMapResizer.min.js', array(), '', true );
it adds a version number and messes up, so it doesn’t work.
– If I remove the
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
it doesn’t work. I haven’t tried enqueing it yet, but I’ll cross that bridge later.

But here’s what I don’t understand.
I’ve hardcoded the entire code right at the end of header.php and placed it within
<?php if( is_front_page() || is_single() ) : ?>
and in this case, not even the hardcoded version works.

Can anyone give it a look? Thank you!