Edit in JSFiddle

      // create a map
      // hook into all the events and update the screen when they're triggered
      // we don't need to prefix the events with the widget's name during initialization
      var map = $("#map").geomap({
        center: [-71.0595678, 42.3604823],
        zoom: 8,

        // position events get a GeoJSON Point object
        move: positionEventHandler,
        click: positionEventHandler,
        dblclick: positionEventHandler,

        // bbox events get an object with a bbox property
        bboxchange: bboxEventHandler
      });

      function positionEventHandler( e, geo ) {
        // jQuery stores the event type in e.type
        // outside of the initialization function,
        // the jQuery UI widget events all have a widget prefix
        // in this case it's: geomap

        // this example builds a selector for the class
        // of the table's row for this event
        // if the event is, e.g., move, e.type is geomapmove and the row we want is .geomapmove
        var eventRowClass = "." + e.type;

        // update the time stamp for this event
        $(eventRowClass + " .date").text($.now());

        // contained in the geo argument as a GeoJSON Point object

        // the coordinates property is an array,
        // this example joins them with an extra space so they look a little nicer
        var displayCoords = geo.coordinates.join( ", " );

            
        // convert the map coordinates to pixel locations to show them as well
        var displayPixels = map.geomap( "toPixel", geo.coordinates ).join( ", " );

        // update the position data
        $(eventRowClass + " .data").html("pixels: [ " + displayPixels + " ]<br>coordinates: [ " + displayCoords + " ]");
      }

      function bboxEventHandler( e, geo ) {
        // again, build a selector for the class of the table's row for this event
        // for example, the bboxchange event's e.type is geomapbboxchange
        // and the row we want is .geomapbboxchange
        var eventRowClass = "." + e.type;

        // update the time stamp for this event
        $( eventRowClass + " .date" ).text( $.now( ) );

        // update the position data,
        // contained in the geo argument as an object with a bbox property
        // currently that's all the object has
        $( eventRowClass + " .data" ).text( "[ " + geo.bbox.join( ", " ) + " ]" );
      }

    <div id="map">
    </div>
    <div class="info">
      <h1>events</h1>
      <p>The basic interaction events are: move, click, dblclick, and bboxchange. jQuery Geo triggers then when a user interacts with the map.</p>
     <table cellspacing="0">
      <thead>
        <tr>
          <th>
            event (time)
          </th>
          <th>
            geo argument
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="geomapmove">
          <td>
            move (<span class="date"></span>)
          </td>
          <td class="data">
          </td>
        </tr>
        <tr class="geomapclick">
          <td>
            click (<span class="date"></span>)
          </td>
          <td class="data">
          </td>
        </tr>
        <tr class="geomapdblclick">
          <td>
            dblclick (<span class="date"></span>)
          </td>
          <td class="data">
          </td>
        </tr>
        <tr class="geomapbboxchange">
          <td>
            bboxchange (<span class="date"></span>)
          </td>
          <td class="data">
          </td>
        </tr>
      </tbody>
    </table>
   </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%;
}

fieldset { border: none; }

legend {
  font-size: 14px;
  font-weight: bold;
}

    #map
    {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
    th
    {
      text-align: left;
    }
    th, td
    {
      margin: 0;
      padding: 4px;
      border-left: solid 2px #dedede;
    }