Map-API_/map.html at main · tatyanka-study/Map-API_ · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>
  <head>
    <title>Custom Symbols (Marker)</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- playground-hide -->
    <script>
      const process = { env: {} };
      process.env.GOOGLE_MAPS_API_KEY =
        "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg";
    </script>
    <!-- playground-hide-end -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/less" ></script>
    <link rel="stylesheet/less" type="text/css" href="mapstyle.less"/> -->
    <link rel="stylesheet" type="text/css" href="mapstyle.css" />
  </head>
  <body>
    <div id="wrap">
      <div id="left-side">
        <div id="locate">
          <p class="bold">ISS is now located at:</p>
          <p>latitude: <span></span>, longitude: <span></span></p>
        </div>
        <div id="map"></div>
      </div>

      <div id="right-side">
        <div id="date">
          <p class="bold">Current UTC time: <span id="time"></span></p>
          <p id="day-today"></p>
        </div>
        <div id="people">
          <ul id="people-name">
            <template id="people-list">
              <li>{{name}}</li>
            </template>
          </ul>
          <div>
            <p class="bold">
              Total amount: <span id="total"></span> people on ISS now
            </p>
          </div>
        </div>
      </div>
    </div>

    <!--
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg"></script>
    <script src="mustache.min.js"></script>
    <script src="map.js"></script>
  </body>
</html>