PartTwoDesign Posted October 23, 2020 Share Posted October 23, 2020 (edited) 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  Edited October 24, 2020 by PartTwoDesign Link to comment
Solution PartTwoDesign Posted October 24, 2020 Author Solution Share Posted October 24, 2020 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!   Link to comment
adriandesign Posted February 17 Share Posted February 17 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! Â Link to comment
tuanphan Posted February 21 Share Posted February 21 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment