When I try to set the height of the gmaps div to 100%, nothing appears on the screen. I am able to set the width to 100%, but for some reason, setting the height to 100% does not work. If I set a specific height like 400px, it works fine.
Below is the code I am using:
<%@ 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>