See Mike Williams’ description on percentage sized maps from his v2 tutorial
You need to add definitions to all the parent elements of the map to allow the browser to calculate a non-zero size.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html,body {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(50.98188, 6.78655),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
map.setZoom(12);
map.setCenter(new google.maps.LatLng(0, 0));
window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
}
google.maps.event.addDomListener(window,"load",initialize);
</script>
</head>
<body>
<div id="site_content" style="width: 100%;height: 100%;">
<div id="head_left" class="background_box" >
</div>
<div id="head_center" class="background_box">
<div class="heading"></div>
</div>
<div id="head_right" class="background_box">
<h1 class="date_data"></h1>
<h1 class="time_data"></h1>
</div>
<div class="spacing_data"></div>
<div id="data_box" class="background_box" style="width: 100%;height: 100%;">
<div id="map_canvas" style="width: 100%;height: 100%;"></div>
</div>
<div class="spacing_data"></div>
<div id="footer_left" class="background_box">
</div>
<div id="footer_center" class="background_box">
<div class="footer"></div>
</div>
<div id="footer_right" class="background_box">
</div>
</div>
</body>
</html>