Javascript 自定义谷歌地图不会显示在div元素中_Javascript_Html_Google Maps_Canvas_Google Maps Api 3

Javascript 自定义谷歌地图不会显示在div元素中

javascript html google-maps canvas google-maps-api-3

Javascript 自定义谷歌地图不会显示在div元素中,javascript,html,google-maps,canvas,google-maps-api-3,Javascript,Html,Google Maps,Canvas,Google Maps Api 3,我试图自定义谷歌地图，但我有一个小问题以下是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 myLatln

我试图自定义谷歌地图，但我有一个小问题

以下是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 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>

父div应该定义高度和宽度

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

试试这个

有关更多详细信息：

在你的代码中似乎没有什么错误，它可以很好地工作，只是隔离了css。我已经检查和测试过了

对我来说没有问题：你说的不工作到底是什么意思？父div是否可见？它有宽度和高度吗？这应该不是问题。可以将“地图画布”嵌套在页面中。我已经添加了完整的html代码。看看吧。完整HTML代码中的css与您最初发布的css不同。当为地图画布使用百分比高度时，地图画布的父div也需要一个高度