Edit in JSFiddle

// create a map, setting mode to drawPoint initially
var map = $("#map").geomap({
    center: [-71.0595678, 42.3604823],
    zoom: 8,
    mode: "drawPoint",
    shape: function(e, geo) {
        // the shape event triggers when a user draws a shape
        // the geo object is a simple GeoJSON object: Point, LineString or Polygon
        // we can append it directly to the map
        map.geomap("append", geo);
    }
});

// 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 drawPoint, drawLineString or drawPolygon
    map.geomap("option", "mode", $(this).val());
});

<div id="map">
</div>
<div class="info">
    <h1>
        drawing</h1>
    <p>
        This example tests the three shape drawing modes: drawPoint, drawLineString and drawPolygon. Choose a tool below and start tapping!</p>
    <p>Double-tap to add the last point and end lines &amp; polygons.</p>
    <p>You can remove individual points while drawing lines &amp; polygons with the escape key.</p>
    <div id="modes">
        <input type="radio" id="drawPoint" name="mode" value="drawPoint" checked="checked" /><label for="drawPoint">drawPoint</label>
        <input type="radio" id="drawLineString" name="mode" value="drawLineString" /><label for="drawLineString">drawLineString</label>
        <input type="radio" id="drawPolygon" name="mode" value="drawPolygon" /><label for="drawPolygon">drawPolygon</label>
    </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;
}