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

但地图并没有显示出来。但是，如果我将下面的代码放入div map-canvas中，则会显示地图

<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中使用百分比非常棘手，因此您应将其设置为html和body，然后让子元素inherit body的{{1}}。这适合任何屏幕分辨率。

简单的选项，具体而且使用height，px等，而不是百分比。

em

<强> Demo

Answer 2

你有API密钥吗？

Check here

尝试使用this code

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
</script>

没有显示坐标的Google地图

2 个答案: