Edit in JSFiddle

      // store references to the inputs
      var runtimeCenter = $("input[name='runtimeCenter']"),
          runtimeZoom = $("input[name='runtimeZoom']");

      // create a map, base the initial center and zoom on the inputs
      var map = $("#map").geomap({
        center: $.parseJSON(runtimeCenter.val()),
        zoom: parseInt(runtimeZoom.val()),
        bboxchange: function (e, geo) {
          // when the bbox changes, update the displayed values
          refreshActual();
        }
      });

      $("#cmdRuntimeCenter").button().click(function () {
        // when the user sets the center, pass the new value to geomap
        // since plain JavaScript arrays are valid JSON,
        // we can use $.parseJSON to convert the string into a value
        map.geomap("option", "center", $.parseJSON(runtimeCenter.val()));

        // geomap doesn't trigger the bbox event when options are set programmatically
        // update the displayed values
        refreshActual();
      });

      $("#cmdRuntimeZoom").button().click(function () {
        // when the user sets the zoom, pass the new value to geomap
        // zoom is always a whole number
        map.geomap("option", "zoom", parseInt(runtimeZoom.val()));

        // geomap doesn't trigger the bbox event when options are set programmatically
        // update the displayed values
        refreshActual();
      });

      // update the displayed values with how the map widget was initialized
      refreshActual();

      function refreshActual() {
        // get the center
        // by default, this is in geodetic coordinates, [lon, lat]
        var actualCenter = map.geomap("option", "center");
        $("#lblCenterPublic").text("[" + actualCenter + "]");

        if ($.geo.proj) {
          // if there is a projection set, convert the geodetic center to map units
          var internal = $.geo.proj.fromGeodetic(actualCenter);
          $("#lblCenterInternal").text("[" + internal + "]");
        } else {
          // if not, then both the center option and internal center are the same
          $("#lblCenterInternal").text("[" + actualCenter + "]");
        }

        // get and display the current zoom value
        $("#lblZoom").text(map.geomap("option", "zoom"));

        // get and display the current pixelSize value
        // you cannot set pixelSize, it's read only
        $("#lblPixelSize").text(map.geomap("option", "pixelSize"));
      }

    <div id="map">
    </div>
    <div class="info">
      <h1>center &amp; zoom example</h1>
      <p>This page tests getting and setting the center &amp; zoom options as well as getting the read-only pixelSize.</p>
      <p class="not-mobile">The center option is a <a href="http://geojson.org/geojson-spec.html#positions">GeoJSON position</a>. The zoom option for a tiled service a whole number from zero to the number of levels defined by the tilingScheme minus one. The pixelSize is the number of map units that fit in a single pixel of the current view. By default, pixelSize is in meters because the default map service is in web mercator meters.</p>
      <h2>runtime options</h2>
      <p>Change the center or zoom option and click set to update the map.</p>
      <div>
        <label>center <input type="text" name="runtimeCenter" value="[-74.5,40.3]" /></label>
        <button id="cmdRuntimeCenter" type="button">set</button>
      </div>
      <div>
        <label>zoom <input type="number" name="runtimeZoom" value="8" /></label>
        <button id="cmdRuntimeZoom" type="button">set</button>
      </div>
      <h2>actual values</h2>
      <p class="not-mobile">The center option is in geodetic cooridinates, lon/lat, but the internal center is in map units, web mercator by default.</p>
      <table>
        <tr>
          <th>geodetic center</th>
          <td id="lblCenterPublic"></td>
        </tr>
        <tr>
          <th>internal center</th>
          <td id="lblCenterInternal"></td>
        </tr>
        <tr>
          <th>zoom</th>
          <td id="lblZoom"></td>
        </tr>
        <tr>
          <th>pixelSize</th>
          <td id="lblPixelSize"></td>
        </tr>
      </table>
    </div>

.not-mobile
{
  display: none;
}

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