// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
				// map. It has a border of the given weight and color and can optionally
				// have a semi-transparent background color.
				function Rectangle(bounds, opt_weight, opt_color) {
				  this.bounds_ = bounds;
				  this.weight_ = opt_weight || 2;
				  this.color_ = opt_color || "#666666";
				}
				Rectangle.prototype = new GOverlay();
			
				// Creates the DIV representing this rectangle.
				Rectangle.prototype.initialize = function(map) {
				  // Create the DIV representing our rectangle
				  var div = document.createElement("div");
				  div.style.border = this.weight_ + "px solid " + this.color_;
				  div.style.position = "absolute";
			
				  // Our rectangle is flat against the map, so we add our selves to the
				  // MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
				  // below the marker shadows)
				  map.getPane(G_MAP_MAP_PANE).appendChild(div);
			
				  this.map_ = map;
				  this.div_ = div;
				}
			
				// Remove the main DIV from the map pane
				Rectangle.prototype.remove = function() {
				  this.div_.parentNode.removeChild(this.div_);
				}
			
				// Copy our data to a new Rectangle
				Rectangle.prototype.copy = function() {
				  return new Rectangle(this.bounds_, this.weight_, this.color_,
									   this.backgroundColor_, this.opacity_);
				}
			
				// Redraw the rectangle based on the current projection and zoom level
				Rectangle.prototype.redraw = function(force) {
				  // We only need to redraw if the coordinate system has changed
				  if (!force) return;
			
				  // Calculate the DIV coordinates of two opposite corners of our bounds to
				  // get the size and position of our rectangle
				  var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
				  var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());
			
				  // Now position our DIV based on the DIV coordinates of our bounds
				  this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
				  this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
				  this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
				  this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
				}
			
			
				function initialize() {
				  if (GBrowserIsCompatible()) {
					var map = new GMap2(document.getElementById("map_canvas"));
					map.setCenter(new GLatLng(24.861393, 67.065339), 16);
					map.addControl(new GSmallMapControl());
					map.addControl(new GMapTypeControl());
			
					// Display a rectangle in the center of the map at about a quarter of
					// the size of the main map
					var bounds = map.getBounds();
					var southWest = bounds.getSouthWest();
					var northEast = bounds.getNorthEast();
					var lngDelta = (northEast.lng() - southWest.lng()) / 3;
					var latDelta = (northEast.lat() - southWest.lat()) / 3;
					var rectBounds = new GLatLngBounds(
						new GLatLng(southWest.lat() + latDelta,
									southWest.lng() + lngDelta),
						new GLatLng(northEast.lat() - latDelta,
									northEast.lng() - lngDelta));
					map.addOverlay(new Rectangle(rectBounds));
				  }
				}