Google Maps JS 示例未显示答案

【问题标题】：Google Maps JS example not showingGoogle Maps JS 示例未显示
【发布时间】：2016-07-29 15:46:47
【问题描述】：

<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlcVddNcJrrifavMfBBHkGhmh8ajmskbU&callback=initMap"
    async defer></script>
  </body>

我正在尝试从本教程中获取此地图以显示在我的 Rails 4 应用程序中。 https://developers.google.com/maps/documentation/javascript/examples/map-simple

使用 API 密钥，它似乎完全消失了，而控制台中没有显示任何消息。

但是没有它显示的密钥 enter image description here

【问题讨论】：

它的工作代码兄弟它的工作完全可以参考这个链接stackoverflow.com/questions/23118546/…

标签： javascript ruby-on-rails google-maps google-maps-api-3

【解决方案1】：

这对我有用

<!DOCTYPE html>
    <html>
      <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
          #map {
            height: 100%;
          }
        </style>
      </head>
      <body>
        <div id="map"></div>
        <script>
          var map;
          function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: -34.397, lng: 150.644},
              zoom: 8
            });
          }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlcVddNcJrrifavMfBBHkGhmh8ajmskbU&callback=initMap"
        async defer></script>
    </body>
</html>

无论如何也要为地图容器添加一个宽度

     #map {
        height: 100%;
        width: 100%;
      }

【讨论】：

即使它在没有为地图容器分配宽度的情况下工作
@Kabali 是的 .. 正在工作。没有分配宽度。我的只是一个（好的）建议