當我將高度設置爲100時，谷歌地圖不會出現

當我將gmaps div設置爲100％的高度時，不會顯示任何內容。該widht我可以設置100％，但對於我不能的高度，如果我設置例如400px的高度它的工作，但不是100％。當我將高度設置爲100時，谷歌地圖不會出現

這裏是我的代碼：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> 
</script> 
<script> 
    function initialize() { 
     var mapProp = { 
      center : new google.maps.LatLng(51.508742, -0.120850), 
      zoom : 5, 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("googleMap"), 
       mapProp); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<style type="text/css"> 
#body { 
    height: 100%; 
} 

#container { 
    height: 100%; 
} 

#googleMap { 
    width: 70%; 
    height: 100%; 
    margin-top: 8px; 
    float: left; 
} 

#myWorkContent { 
    width: 30%; 
    height: 400px; 
    margin-top: 8px; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    /*white-space: nowrap;*/ 
    float: left; 
} 

#myWorkContent img { 
    border: 0; 
    width: 80px; 
    margin-left: 5px; 
} 
</style> 
</head> 
<body> 
    <div id="container" class="container"> 

     <h2>Photos of the day</h2> 

     <a href="FriendsList.jsp">Photos of the day</a> | <a 
      href="PlacesServlet.jsp">My day in map</a> <br /> 

     <div id="googleMap"></div> 
     <div id="myWorkContent" class="myWorkContent"> 
      <!-- Your images over here --> 
      <img src="images/IMG_20131216_084621.jpg" style="height: 80px;" /> <img 
       src="images/IMG_20131216_085350.jpg" style="height: 80px;" /> <img 
       src="images/IMG_20131216_085551.jpg" style="height: 80px;" /> <img 
       src="images/IMG_20131216_092417.jpg" style="height: 80px;" /> <img 
       src="images/IMG_20131216_092514.jpg" style="height: 80px;" /> <img 
       src="images/IMG_20131216_092529.jpg" style="height: 80px;" /> <img 
       src="images/IMG_20131220_111813.jpg" style="height: 80px;" /> <img 
       src="images/IMG_20131220_112158.jpg" style="height: 80px;" /> 
     </div> 
    </div> 
</body> 
</html>

來源

2014-01-31 JoaoFilipeClementeMartins

我得到它與這個http://stackoverflow.com/questions/3741150/google-maps-api-map-doesnt-appear工作。有人可以將我的標記標記爲重複請求。它錯過了html的高度 – JoaoFilipeClementeMartins

原因是你沒有設置任何身體高度/寬度。

#body { //wrong selector 
    height: 100%; 
} 

#container { 
    height: 100%; 
}

始終使用

html, body { 
    width: 100%; 
    height: 100%; 
}

來源

2014-01-31 11:16:32 Praveen

我試過了。缺少的是html高度，我在帖子中看到它，並將其放置在對我的問題的評論中。如果你可以把它標爲重複 – JoaoFilipeClementeMartins

當我將高度設置爲100時，谷歌地圖不會出現

回答

相關問題