<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 100%;
height: 512px;
border: 1px solid black;
background-color: red;
}
</style>
<!-- this gmaps key generated for http://openlayers.org/dev/ -->
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA_VBQfvnTdodKeGbWBDNT0xRD2amtwmqAURjv8JiROX_wMNYqHBQIBrK14Wwa7jMNV8mPn86Rs2zflQ"></script>
<!-- Localhost key -->
<!-- <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>-->
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
function init(){
var map = new OpenLayers.Map( 'map' ,
{ controls: [new OpenLayers.Control.MouseDefaults()] , 'numZoomLevels':20});
var normal = new OpenLayers.Layer.Google( "Google Satellite" , {type: G_NORMAL_MAP, 'maxZoomLevel':18} );
map.addLayers([normal]);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
map.addControl( new OpenLayers.Control.PanZoomBar() );
var bounds = new OpenLayers.Bounds('-87.79053', '39.89316', '-85.65279', '42.13795');
map.zoomToExtent(bounds)
var viewport = map.getExtent();
var test = viewport.containsBounds(bounds);
alert('test: ' + test);
}
// -->
</script>
</head>
<body onload="init()">
<h1>OpenLayers With Google Layer Example</h1>
<div id="map"></div>
</body>
</html>