Edit in JSFiddle

      var map = $("#map").geomap({
        center: [-71.0595678, 42.3604823],
        zoom: 6,
        mode: "drawPoint",
        shape: function (e, geo) {
          var state = map.geomap("find", geo, 0);
          if (state.length > 0) {
            map.geomap("remove", state[0]);

            var color = Math.round(0xffffff * Math.random()).toString(16);

            map.geomap("append", state[0], {
              color: "#" + ( color.length == 5 ? "0" : "" ) + color
            });
          }
        }
      }),
      states = null;

      $.ajax({
        url: "http://data.jquerygeo.com/usastates.json",
        dataType: "json",
        success: function (result) {
          states = result;
          map.geomap("append", states);
        },
        error: function (xhr) {
          alert(xhr.statusText);
        }
      });

    <div id="map">
    </div>
    <div class="info">
      <h1>USA States</h1>
      <p>This map reads USA state boundary data as a GeoJSON FeatureCollection and draws it on top of OpenStreetMap.</p>
      <p>Click a state to change its color!</p>
    </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; }