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

On 10/25/2020 at 1:18 AM, PartTwoDesign said:

Solved after carefully checking my code 😀

I had script tags instead of CSS links in my header (and the javascript path was incorrect). Delighted I figured it out!

 

 

Hi there, I'm hoping to install Image Map Pro on my site but can't for the life of me work out how. Are you able to share how you got it to work? There are no installation steps provided with the plugin and can't work out where each piece of code goes, or what other files are needed to be uploaded etc. Happy to pay for your trouble!

On 11/19/2023 at 4:35 PM, raego said:

Hi there, I'm hoping to install Image Map Pro on my site but can't for the life of me work out how. Are you able to share how you got it to work? There are no installation steps provided with the plugin and can't work out where each piece of code goes, or what other files are needed to be uploaded etc. Happy to pay for your trouble!

Hello! Have you figured this out? Would love some help with my project if you can! 

On 1/17/2024 at 12:44 PM, amyvd said:

Hello! Have you figured this out? Would love some help with my project if you can! 

Hi there! Unfortunately I had to abandon Image Map Pro as they confirmed their current version isn't compatible with Squarespace. I am using Drawpoint as an alternative - not has much functionality in terms of styling etc but it works and is super easy to setup and embed with iFrame.

https://www.drawpoint.io/