Adding Map w/ dynamic data to Google Sites-CodePudding

Background

I am trying to add a Google Map to a (new) Google Sites; the map will have multiple markers whose data will change over time based on a Google Sheet.

Where I am

I have been able to add a map w/ static data directly to the site using the "Embed" option, but I need to use Google Scripts functionality for the dynamic markers.

Problem

When using the same html script and integrating it with Google Scripts, the text will show up on the Google Sites but not the map.

Code

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Add Map</title>

    <style type="text/css">
      #map {
        height: 100%;
        width: 100%;
      }
    </style>

    <script>

      // Initialize and add the map
      function initMap() {
        // The location of Uluru
        const uluru = { lat: -25.344, lng: 131.036 };
        // The map, centered at Uluru
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 4,
          center: uluru,
        });
      }

    </script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script async
      src="https://maps.googleapis.com/maps/api/js?key=<API_KEY>&callback=initMap"
    >
    </script>
  </body>
</html>

The API_KEY is filled in in the code. Thanks in advance for any pointers.

CodePudding user response：

The problem is that the height is being set to 0 pixels; the map is inheriting from the parent block element, which isn't specifying a size resulting in the height being assumed to be 0 pixels. This can either be fixed by specifying a height in pixels:

<style type="text/css">
  #map {
    height: 100%;
    width: 100%;
  }
</style>

or specify that the height should be 100% of the HTML body:

<style type="text/css">
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>