VIA11 Posted March 27, 2023 Posted March 27, 2023 (edited) Hello! I am trying to add an interactive map to our website: https://www.lefrenchdesign.org/map-le-french-design-milano-2023 A classic Iframe works but we have issues with the sharing links that refere to our website and not to a specific points as it should. To counter that, we are trying to add an Iframe with JavaScript : <style>body, html{ height: 100%; }</style><div id="map-container" style="width: 100%; height: 100%;"></div><script type="application/javascript" src="https://livemap.getwemap.com/js/sdk.min.js"></script><script>const container = document.getElementById('map-container');wemap.v1.createLivemap(container, { emmid: 22679, token: 'KKBAPW5XX1MISA3S3C57GUZLT'});</script> It doesn't appear at all when we add it to a block like the classic Iframe. We have implemented it throught the weel icon next to the page's name but it appears under the header and cannot be modified or move at all. Can anyone here know what to do to fix issue: lower the map of a few inches or to know how to implemented in a block for instance? Many thanks! Lea Edited March 27, 2023 by VIA11
creedon Posted March 27, 2023 Posted March 27, 2023 (edited) Issue 1 <div id="map-container" style="width: 100%; height: 100%;"></div> <script type="application/javascript" src="https://livemap.getwemap.com/js/sdk.min.js"></script> <script> const container = document.getElementById('map-container'); wemap.v1.createLivemap(container, { emmid: 22679, token: 'KKBAPW5XX1MISA3S3C57GUZLT' }); </script> This code has been inserted into Page Settings > Advanced > Page Header Code Injection for the page. This is causing the the page to be misrendered. DIV tags should not be in this location. Remove the code from that location and put it into a code block on the page. Once that is done we can move onto other issues. Edited March 28, 2023 by creedon VIA11 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
VIA11 Posted March 28, 2023 Author Posted March 28, 2023 (edited) Hello Creedon, Thank you for your help. I have done so and added the code onto a code block on the page. Unfortunately, the map doesn't appear anymore : https://www.lefrenchdesign.org/map-le-french-design-milano-2023#/search@45.4678643,9.1804977,11.79 Would you know what the issue could be? Many thanks, Lea Edited March 28, 2023 by VIA11
creedon Posted March 28, 2023 Posted March 28, 2023 Quote Unfortunately, the map doesn't appear anymore Change the following code... <style> body, html { height: 100%; } </style> ...to... <style> #block-yui_3_17_2_1_1679992576597_7922 .sqs-block-content { height : 100%; } </style> In most cases code block code does not need to manipulate the html and body elements. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
VIA11 Posted March 29, 2023 Author Posted March 29, 2023 Hello! Unfortunately this hasn't solved the issue: Would you have a different solution? Again, many thanks!
creedon Posted March 29, 2023 Posted March 29, 2023 Quote Unfortunately this hasn't solved the issue: Would you have a different solution? I am viewing your site from the outside and this is what I see. Have you used private browsing to view your site? Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
VIA11 Posted March 30, 2023 Author Posted March 30, 2023 Yes we have the Iframe map at the moment but the sharing function doesn't work properly, which is why we would like to implement the JS code map, which solves this issue. A classic Iframe works but we have issues with the sharing links that refere to our website and not to a specific points as it should. But once I have followed your last instructions the results are the screenshots I have sent. Yes, I have tried in private navigation as well. The issue that we have is really with the Java Script code, the classic Iframe is not problematic but do not allowed us the use the primordial function of sharing. I hope it is clear and that it all make sense! Again, thanks a lot for your help on the matter. Best, Lea
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment