ベタですが...
ヘッダーとフッター領域を確保しながらその他はGoogle Mapで埋めるHTMLとCSSです。
ネットに転がってるサンプルを見ると時々Googleのコピーライト部が隠れちゃってるのがありますね、一応コピーライト部も隠れないように書いてます。
##短い時
##長い時
##ソースコード類
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&language=ja®ion=JP"></script>
<script src="./script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" />
<title>gmap</title>
</head>
<body>
<header>
<p>ヘッダー</p>
<p>ヘッダー</p>
<p>ヘッダー</p>
</header>
<div class="map_frame">
<div id="map-canvas"></div>
</div>
<footer>
<p>フッター</p>
<p>フッター</p>
<p>フッター</p>
</footer>
</body>
</html>
style.css
* {
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
-ms-box-sizing : border-box;
box-sizing : border-box;
}
html, body {
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
p {
margin : 0;
padding : 0;
line-height : 120%;
}
header {
width : 100%;
height : 200px;
position : absolute;
background : #eeeeee;
top : 0;
border-bottom : 1px solid #999999;
padding : 5px;
overflow : hidden;
}
.map_frame {
position : absolute;
top : 0;
bottom : 0;
width : 100%;
margin-top : 200px;/* ヘッダーの高さ */
margin-bottom : 100px;/* フッターの高さ */
}
#map-canvas {
width : 100%;
height : 100%;
}
footer {
position : absolute;
width : 100%;
height : 100px;
bottom : 0;
background : #eeeeee;
border-top : 1px solid #999999;
padding : 5px;
overflow : hidden;
}
script.js
var map;
google.maps.event.addDomListener(window, "load", function() {
// init map
var mapOptions = {
"zoom" : 14,
"center" : new google.maps.LatLng(35.685379, 139.753089)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}, false);