Issue adding a map via a JS Iframe

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 

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.

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

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.

Hello! 

Unfortunately this hasn't solved the issue: 

Would you have a different solution? 

Again, many thanks!

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?

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