I am having trouble getting my map to display at 100% height using the Google Maps API. I've encountered similar issues in the past with the Google Charts API as well.
From what I've gathered, it seems like setting the height of the html and body elements to 100% is the first step. However, despite doing this, the map only appears when its container has a fixed height specified.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Map</title>
<style>
html, body{
width:100%;
height:100%;
}
.map{
width:100%;
height:100%;
}
</style>
</head>
<div class="mainWrap">
<div id="mainMap" class="map">
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/////Global variables and arrays/////
var markerArray = [];
var myID;
var mapZoom = 9;
var mapCenterLat = 41.82454868;
var mapCenterLon = -87.6341629;
//Initialize function to build map after page loads
google.maps.event.addDomListener(window, 'load', initialize);
//Google API Initialize function to build map
function initialize() {
/////Variables/////
var infoWindow = new google.maps.InfoWindow({
});
var map_canvas = document.getElementById('mainMap');
var map_options = {
center: new google.maps.LatLng(mapCenterLat,mapCenterLon),
zoom: mapZoom,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
//Draw the map
var map = new google.maps.Map(map_canvas, map_options);
} //End initialize()
</script>
</html>