css - 坐标未显示的谷歌地图

Question

我想在我的网站上显示一个谷歌地图，但它没有。我成功导入了所需的 JS 文件:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

我还得到了一个正确导入了必要代码的外部 JS 文件。它的内容是:

$(document).ready(function () {
  console.log('document ready');
  function initializeMap() {
    console.log('initialize');
    var myOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        myOptions);
  }
  initializeMap();
});

我的 HTML 看起来像(我为我的样式使用 bootstrap3):

<div class="container" style="height:100%; width: 100%;">
        <div style="height:100%; width: 100%;">
                <div id="map-canvas">

                </div>
            </div>
</div

但是 map 没有显示。但是，如果我将下面的代码放入 div map Canvas 中，则会显示一张 map

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3988.7878538147397!2d36.828219000000004!3d-1.3022289999999999!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f111cdbaa9205%3A0xe6a1c22d75cae422!2sAfcon+Limited!5e0!3m2!1sen!2s!4v1416212583057" width="600" height="450" frameborder="0" style="border:0"></iframe>

Answer 1

您的问题与 CSS 相关，您没有正确设置元素的 height 和 width。它适用于 iframe，因为您指定了 height 和 width。

在 height 中使用 percentage 是有技巧的，所以你应该将它设置为 html 和 body，并且然后让子元素继承body的height。这将适合任何屏幕分辨率。

简单的选项，具体并使用 px、em 等，而不是 percentage。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container,
.container > div,
.container > div #map-canvas {
  height: inherit;
}

Demo