Edit in JSFiddle

// create a map, setting mode to zoom initially
var map = $("#map").geomap({
    center: [-71.0595678, 42.3604823],
    zoom: 8,
    mode: "zoom"
});

// jQuery UI for pretty buttons
$("#modes").buttonset();

$("#modes input").click(function() {
    // set the map's mode option based on value of the input clicked
    // this will change the map's mode to pan or zoom
    map.geomap("option", "mode", $(this).val());
});

<div id="map">
</div>
<div class="info">
    <h1>
        zoom mode</h1>
    <p>When a geomap widget's mode option is &quot;zoom&quot;, you can your your mouse to draw a rectangle. jQuery Geo will change the bbox of the map to match the rectangle as closely as possible based on the tiling scheme and viewport size.</p>
    <p class="not-mobile">This mode is more useful for dynamic map services and may be more familiar to GIS professionals.</p>
    <p class="not-mobile">Hint: in pan or any of the draw modes, you can hold the shift key to temporarily switch to zoom mode.</p>
    <div id="modes">
        <input type="radio" id="pan" name="mode" value="pan" /><label for="pan">pan</label>
        <input type="radio" id="zoom" name="mode" value="zoom" checked="checked" /><label for="zoom">zoom</label>
    </div>
</div>

@media only screen and (min-width: 800px) 
{  
    .info
        {
        max-width: 45% !important;
    position: absolute !important;
    right: 16px;
    top: 16px;
}

.not-mobile
{
    display: block;
}
}

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;
}