Jump to content

Installing CodeCanyon Interactive Map Pro to Squarespace Site

Recommended Posts

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

Edited by raego
Link to comment
  • Replies 4
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

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

image.thumb.png.6274c269b2d2fbe948db06d417a31a8f.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
7 hours ago, Beyondspace said:

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

image.thumb.png.6274c269b2d2fbe948db06d417a31a8f.png

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

Screen Shot 2023-11-14 at 7.53.18 am.png

Link to comment
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

Screen Shot 2023-11-14 at 7.53.18 am.png

Issue has been raised in Chrome Developer Console tab

image.thumb.png.8ed0398acb9630834bfdf0fcfed722cd.png

I suggest you seek advice from the plugin author

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.