Question

我正在关注谷歌地图示例的教程。教程适用于视频，但我什么也没得到。我正在使用 atom-live-server。

我什至复制并粘贴了确切的脚本/将 api 密钥更改为我自己的并在 chrome 中打开了保存的 index.html。我有网页，但没有地图。我错过了什么？或者我从哪里开始看着。我对 javascript 不是很熟练，所以这可能是我不知道的显而易见的事情。

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

    <style type="text/css">
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px;
        /* The height is 400 pixels */
        width: 100%;
        /* The width is the width of the web page */
      }
    </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: { lat: -25.344, lng: 131.036 },
        });
        // The marker, positioned at Uluru
        const marker = new google.maps.Marker({
          position: uluru,
          map: map,
        });
      }
    </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
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      async
    ></script>
  </body>
</html>

谷歌地图未在工作站上显示的网页内显示地图

0 个答案: