Double click an area to zoom

<html>
<head>
  <title>OpenLayers Example</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    </head>
    <body>
      <div style="width:100%; height:100%" id="map"></div>
      <script defer="defer" type="text/javascript">
        var map = new OpenLayers.Map('map');
        var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
        map.addLayer(wms);
        map.zoomToMaxExtent();
      </script>
</body>
</html>
Much of the above will be standard or self explanatory. Following are the interesting parts and their explanation!
		var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} ) ;
Without a layer the map would be blank, just a white html page. The layer, in this case, is the most basic layer. Just country borders and oceans. At this high a level, there is no need for cities, rivers, roads, or terrain, though it could be added. Adding such detail to the map does increase the size. That being said, if you zoom in enough, the U.S. state borders are present, with many of the inland bodies of water.

The previous segment declared a variable, but nothing more than a declaration. The next statement adds the declared layer to the map making it visible.
		map.addLayer(wms);
The last line of interest instructs how to zoom the map. Here, the statement says to make the map as large as possible, while still fitting the entire map into the window. At this point, the map window is set to 100%, with a width of 100%, so the map is stretched to a width of 100% regardless of the client screen resolution. I'm sure this will be much more useful if the map window were set to a definite size, maybe 400x300.
		map.zoomToMaxExtent();