Google Maps API Tutorial Google Maps API Tutorial
Back to Home Page

Full Screen Hello World Example for Google Maps API

View Example


Notes

The key is to properly set the style of html, body and map_canvas as below:
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas{
	width: 100%;
	height: 100%;
}


Source Code

<!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=UTF-8">
<title>Google Map API V3: Full Screen Hello World</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas{
	width: 100%;
	height: 100%;
}
</style>
<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(37.286172, -121.80929),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>