`DEMO`

Question

我试图自定义谷歌地图，但我遇到了一个小问题。

这是css代码：

#map-canvas {
    width: 100%;
    height: 500px;
}

和js代码：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    function initialize() {
      var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
      var mapOptions = {
        zoom: 4,
        center: myLatlng
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

这就是我在html中初始化地图的方式。这个例子确实有效。

<div id="map-canvas"></div>

但是当我试图将我的地图放入某个div时，例如：

<div>
    <div id="map-canvas"></div>
</div>

它不起作用。如何解决？

///编辑请将其放入example.html并尝试运行。我什么都没发生。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        function initialize() {
          var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
          var mapOptions = {
            zoom: 4,
            center: myLatlng
          }
          var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

          var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: 'Hello World!'
          });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>

<body>
    <div>
        <div id="map-canvas"></div>
    </div>
</body>
</html>

Answer 1

您的父div应定义高度和宽度。

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

试试这个。

更多细节：

Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag

Answer 2

你的代码似乎没有错，它只是分离了css.I已经检查和测试。

自定义Google地图不会显示在div元素中

2 个答案:

`DEMO`