Installing CodeCanyon Interactive Map Pro to Squarespace Site

Hi, 

I recently purchased the CodeCanyon Interactive Map Pro plugin - the editor works great and gives me everything I'm looking for. However I'm struggling to work out how to embed the map to my desired site using the code. 

My main struggle is now knowing where to put the relevant code, or knowing if I need to upload the JS files etc to my Squarespace site as well. 

Has anyone else managed to embed this plugin to their site successfully?

This is their documentation - https://preview.codecanyon.net/item/image-map-pro-jquery-interactive-image-map-builder/full_screen_preview/2792438

Let's take a look at the new Image Map Pro editor for the integration tutorials

Step 0:

Open the editor where you save your current image map

Step 1:
 

<div id="image-map-pro"></div>

Go to your page editor, insert a new Code block then paste the snippet into the Code block, make sure you turned off the 'Display source' option

Step 2.1:

- First you need to upload the file in the package they gave you, find the file image-map-pro.min.js, and upload the file into your website via accessing the Link Editor, you can check the detail steps here https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Step 2.2:

- Go to your Footer injection and paste this snippet to the end of the textbox

<script src="/s/image-map-promin.js"></script>

Don't be surprise, Squarespace has rename your file a bit, removing one dot...

Step 3:

Paste the given code in the script below the one on Step 2.2

7 hours ago, Beyondspace said:

Let's take a look at the new Image Map Pro editor for the integration tutorials

Step 0:

Open the editor where you save your current image map

Step 1:
 

<div id="image-map-pro"></div>

Go to your page editor, insert a new Code block then paste the snippet into the Code block, make sure you turned off the 'Display source' option

Step 2.1:

- First you need to upload the file in the package they gave you, find the file image-map-pro.min.js, and upload the file into your website via accessing the Link Editor, you can check the detail steps here https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Step 2.2:

- Go to your Footer injection and paste this snippet to the end of the textbox

<script src="/s/image-map-promin.js"></script>

Don't be surprise, Squarespace has rename your file a bit, removing one dot...

Step 3:

Paste the given code in the script below the one on Step 2.2

Thanks so much this has almost worked! The map is now visible and the mouse is recognising the poly shapes on the map - however the actual hover effect is not displaying (e.g. shape overlay and pop up in image below). I have copied the entire script from the editor so not sure what is going wrong.

Are you able to take a look? (Under the Floor Plans tab on the page)

https://www.brontegroup.com.au/solai-bronte-2023-working 
Password: solai

5 hours ago, raego said:

Thanks so much this has almost worked! The map is now visible and the mouse is recognising the poly shapes on the map - however the actual hover effect is not displaying (e.g. shape overlay and pop up in image below). I have copied the entire script from the editor so not sure what is going wrong.

Are you able to take a look? (Under the Floor Plans tab on the page)

https://www.brontegroup.com.au/solai-bronte-2023-working 
Password: solai

Issue has been raised in Chrome Developer Console tab

I suggest you seek advice from the plugin author

2 hours ago, Beyondspace said:

Issue has been raised in Chrome Developer Console tab

I suggest you seek advice from the plugin author

Thanks for your help - waiting on a response now 🙂