Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Question

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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Tuan Phan pointed out that I was missing the following code. Once I added it, my map appeared on my live page. Add this before </style> #map {     height: 500px !important; }

Posted Images

2 answers to this question

Recommended Posts

  • 0
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 BaNgan from 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, 360 Degree Photo block, Animated Heading Block
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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...