Jump to content

Embed HTML code working in safe mode but not on live page

Recommended Posts

Site URL: https://www.prescribinglife.com/thubs

I am attempting to include a custom Google map via Google Maps Javascript API. My code block (containing my HTML code) works in Save Preview Mode. 

However, when viewing the live page (https://www.prescribinglife.com/thubs) there is no  map. Any ideas what I am doing wrong? Could it be a DIV height / width size issue?

Thanks in advance for any help on this issue.

Here is the code in my code block:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map LER</title>
    <style type="text/css">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
 
      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      let map;
 
      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
        });
      }
    </script>
  </head>
  <body>
    <div id="map" style="width:100%; height:100%"></div>
 
    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      async
    ></script>
  </body>
</html>

Squarespace Safe Preview Mode Screenshot 2021-03-30 141447.png

Link to comment
5 hours ago, adssfskjdasdfasdf said:

Site URL: https://www.prescribinglife.com/thubs

I am attempting to include a custom Google map via Google Maps Javascript API. My code block (containing my HTML code) works in Save Preview Mode. 

However, when viewing the live page (https://www.prescribinglife.com/thubs) there is no  map. Any ideas what I am doing wrong? Could it be a DIV height / width size issue?

Thanks in advance for any help on this issue.

Here is the code in my code block:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map LER</title>
    <style type="text/css">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
 
      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      let map;
 
      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
        });
      }
    </script>
  </head>
  <body>
    <div id="map" style="width:100%; height:100%"></div>
 
    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      async
    ></script>
  </body>
</html>

Squarespace Safe Preview Mode Screenshot 2021-03-30 141447.png

It is showing

image.thumb.png.c71fb6672ae88c292436089eed83f433.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.