Question

我遇到的问题是，当我的导航栏位于页面上时，我的页面将不会显示谷歌地图。如果我删除地图之间的所有内容将填充整个页面。我的印象是它应该只在#map-canvas元素中渲染，我应该能够在它上面设置高度和宽度来包含它并操纵它。

我认为标题，导航或包装可能会有些超过顶部，并尝试设置显式的z顺序。

有没有什么东西适合任何会绊倒它的人？有没有更好的方法将地图设置为元素？不是dom load？

这是我头脑的相关代码，由谷歌生成。

<head>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=">
  </script>
  <script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

这是相关的HTML。

<header>
<nav>
  <ul id="mainNav">
    <li><a href="index.php">Home</a></li>
    <li><a href="about.php">About</a></li>
    <li><a href="#">Sign up</a></li>
    <li><a href="#">Login</a></li>
    <li class="listText">BlueHarvest, star wars is great</li>
  </ul>
</nav>
</header>
<div id="wrapper">
<div id="map-canvas">    
</div>
</div>
<footer></footer>
</body>

我的相关CSS

body{
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    float:left;
}
#mainNav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
}
#mainNav li {
    float: left; 
}
#mainNav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
}    
#map-canvas{
    height: 100%;
}

Answer 1

上次尝试实施Google地图时，我遇到了类似的问题。尝试将其添加到CSS的末尾：

.gm-style {
    width: auto;
    height: auto;
}

Answer 2

事实证明，我需要在<header>或<nav>上设置一个高度。任何高度，我从1px-500px测试将正确设置并显示谷歌地图。

Google不会显示标题

2 个答案: