Image Map Pro - how to get image to appear correctly?

Site URL: https://overlandervehicles.co.uk/image-map-test

Hello 🙂

I'm hoping someone can help me... I've working on an image map for a client using Image Map Pro and I want to add it to the site to test that it works ok so far.

I've followed @simon 's instructions outlined in this thread: 

I've inserted this code block: <div id="image-map-pro-container"></div> on this page: https://overlandervehicles.co.uk/image-map-test

However, the image map is not appearing correctly and there's also a large amount of space appearing above it. (I've attached a jpeg to illustrate how it should look).

Below is what I have pasted into the site's Code Injection - perhaps there is an error that I can't locate:

HEADER

<link rel="stylesheet" href="css/image-map-promin.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://asparagus-sawfish-h9k3.squarespace.com/s/image-map-promin.js"></script>
<script src="https://asparagus-sawfish-h9k3.squarespace.com/s/image-map-promin.css"></script>
<script src="https://asparagus-sawfish-h9k3.squarespace.com/s/fontawesome-webfont.svg"></script>
<script src="https://asparagus-sawfish-h9k3.squarespace.com/s/font-awesomemin.css"></script>

FOOTER

<script src="js/jquery.min.js"></script>
<script src="https://asparagus-sawfish-h9k3.squarespace.com/s/image-map-promin.js"></script>
  <script type="text/javascript">
        ;(function ($, window, document, undefined) {
            $(document).ready(function() {
$('#image-map-pro-container').imageMapPro({"id":5719,"editor":
{"previewMode":1,"selected_shape":"oval-7185","tool":"select","shapeCounter":{"spots":2,"ovals":1}},"general":{"name":"Overlander R160","width":2500,"height":1500,"naturalWidth":2500,"naturalHeight":1500},"image":{"url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92b71f1603802ed412b449/1603450658754/R160_keyline.jpg"},"shapes":{"pageload_animation":"grow","glowing_shapes":1,"glowing_shapes_color":"#ee7202","glow_opacity":0.35555555555555557,"stop_glowing_on_mouseover":0},"tooltips":{"tooltip_animation":"grow"},"layers":{"layers_list":[{"id":0,"title":"Main Floor","image_url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92b71f1603802ed412b449/1603450658754/R160_keyline.jpg","image_width":2500,"image_height":1500}]},"spots":[{"id":"oval-9983","title":"Circle","type":"oval","x":11.331,"y":40.755,"width":2.134,"height":3.557,"x_image_background":11.331,"y_image_background":40.755,"width_image_background":2.134,"height_image_background":3.557,"default_style":{"background_type":"image","background_image_url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92bc712226271c5b6a74f8/1603452017223/Plus_icon.png","background_color":"#ee7202","background_opacity":1,"border_style":"none"},"mouseover_style":{"background_image_url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92bce7eabde0201d2385bd/1603452135391/Minus_icon.png"},"tooltip_style":{"border_radius":2,"padding":8,"background_opacity":0.9924479166666667,"width":196,"auto_width":0,"offset_x":0.050422091782284184,"offset_y":-0.5390761294912796},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-241201","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Oversized Rear Door with Retainer Catch"}}},{"settings":{"name":"Image","iconClass":"fa fa-camera"},"options":{"image":{"url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92c015dfec2546ae952a1a/1603452949430/R160_Rear.jpg"}}}]}}]}}},{"id":"oval-7185","title":"Circle Test","type":"oval","x":32.77,"y":34.817,"width":2.134,"height":3.557,"x_image_background":32.77,"y_image_background":34.817,"width_image_background":2.134,"height_image_background":3.557,"default_style":{"background_type":"image","background_image_url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92bc712226271c5b6a74f8/1603452017223/Plus_icon.png","background_image_opacity":0.6176470588235294,"background_color":"#ee7202","background_opacity":1,"border_style":"none"},"mouseover_style":{"background_image_url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92bc712226271c5b6a74f8/1603452017223/Plus_icon.png","border_style":"none"},"tooltip_style":{"border_radius":2,"padding":8,"background_opacity":0.9924479166666667,"width":196,"auto_width":0,"offset_x":0.050422091782284184,"offset_y":-0.5390761294912796},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-241201","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Oversized Rear Door with Retainer Catch"}}},{"settings":{"name":"Image","iconClass":"fa fa-camera"},"options":{"image":{"url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92c015dfec2546ae952a1a/1603452949430/R160_Rear.jpg"}}}]}}]}}}]});
              });
        })(jQuery, window, document);
    </script>

Any help very much appreciated! 

Many thanks,

Anna 

Hi @PartTwoDesign

I'm also using image map pro for my squarespace site and wanted to ask if you can help me out!

Attached are the screenshots of what I inserted into the header and footer code injection.

For the div, do you just add that on the page and use a code block? I can't get the map to appear.

I appreciate any help!

On 2/18/2023 at 1:54 AM, adriandesign said:

Hi @PartTwoDesign

I'm also using image map pro for my squarespace site and wanted to ask if you can help me out!

Attached are the screenshots of what I inserted into the header and footer code injection.

For the div, do you just add that on the page and use a code block? I can't get the map to appear.

 

I appreciate any help!

 

Remove <script> and </script> in Code Block