<div>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAYPkTVWxeUrorq54WpxZvIRRlNQBzofQITBvW4gjVcyUdl290PRS4NjsQ5Jd-1VbQgNTeA0hk6_9Kyg"

            type="text/javascript"></script>

    <script type="text/javascript">



    // 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 || "#888888";

    }

    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(38.290745, 21.796253), 13);

        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()) / 2.3;

        var latDelta = (northEast.lat() - southWest.lat()) / 2.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));

      }

    }



    </script></div>