Jump to content

Issue adding a map via a JS Iframe

Recommended Posts

Posted (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 by VIA11
Posted (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 by creedon

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.

Posted
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.

Posted

Hello! 

Unfortunately this hasn't solved the issue: 

Would you have a different solution? 

 

Again, many thanks!

 

code1.PNG

code2.PNG

code3.PNG

Posted
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.

ScreenShot2023-03-29at2_54_14PM.thumb.png.4991fca64e66611c9c8b361c33bf4287.png

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.

Posted

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 

 

 

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.