Edit in JSFiddle

      // create a map
      var map = $( "#map" ).geomap( {
        center: [ -71.0595678, 42.3604823 ],
        zoom: 9,
        bboxchange: function( e, geo ) {
          // whenever the bbox changes, update the inset map's shape
          insetmap.geomap( "empty" );
          insetmap.geomap( "append", bboxToPolygon( geo.bbox ) );
        }
      } );

      // create a smaller map
      // stop interaction (static mode) and add the default service but
      // without an attr property, it's on the main map
      var insetmap = $( "#insetmap" ).geomap( {
        center: [ -71.0595678, 42.3604823 ],
        zoom: 6,
        mode: "static",
        services: [ {
          type: "tiled",
          src: "http://tile.openstreetmap.org/{{=zoom}}/{{=tile.column}}/{{=tile.row}}.png"
        } ]
      } );

      // append a shape to the inset map to show the big map's bbox
      insetmap.geomap( "append", bboxToPolygon( map.geomap( "option", "bbox" ) ) );

      function bboxToPolygon( bbox ) {
        // a quick function to convert a bbox into a true GeoJSON Polygon
        return {
          type: "Polygon",
          coordinates: [ [
            [ bbox[ 0 ], bbox[ 1 ] ],
            [ bbox[ 0 ], bbox[ 3 ] ],
            [ bbox[ 2 ], bbox[ 3 ] ],
            [ bbox[ 2 ], bbox[ 1 ] ],
            [ bbox[ 0 ], bbox[ 1 ] ]
          ] ]
        }
      }

    <div id="map">
      <div id="insetmap">
      </div>
    </div>

html
{
  font:13px/1.231 Calibri,Arial,sans-serif; *font-size:small;
}

.info 
{
  background: #fff;
  border-radius: 8px;
  box-shadow: -4px 4px #444;
  opacity: .8;
  padding: 8px;
  width: 95%;
}

    #map
    {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }

    #insetmap
    {
      border: solid 2px #444;
      position: fixed;
      right: 8px;
      bottom: 8px;
      width: 20%;
      height: 20%;
    }