緯度経度を表示するボックスを表示する

実行結果

次の例では、地図の中心点の緯度経度を表示するボックスを表示します。
ソースコードと解説

地図の中心点の緯度経度を表示するボックスを表示するには、ZDC.MapクラスのgetCenter()を利用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ローダーのURLをscriptでロードする -->
<script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
<style type="text/css">
  div#centerInfoBox {
    /* 角丸の設定 */
    border-radius: 10px;
    border: 2px #CCCCCC solid;
    background-color: #FFFFFF;

    /* 半透明の設定 */
    filter: alpha(opacity=75);
    opacity: 0.75;

    /* 配置場所の設定 */
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    font-size: 78%;

    /* 選択禁止 */
    user-select: none;
  }

  div#wrpper {
    padding: 5px;
  }
</style>
<script type="text/javascript">
  // オブジェクト
  var map;

  // 中心点の緯度経度（東京駅）
  const lat = 35.681406, lng = 139.767132;

  // ZMALoader
  ZMALoader.setOnLoad(function (mapOptions, error) {
    if (error) {
      console.error(error)
      return
    }

    // マップオプションをデフォルト値から変更する
    mapOptions.center = new ZDC.LatLng(lat, lng); // 中心点の緯度経度を設定

    // 地図を生成
    map = new ZDC.Map(
      document.getElementById('ZMap'),
      mapOptions,
      function() {
        // Success callback
        /* センターマーカーの表示 */
        map.addControl(new ZDC.CenterMarker());

        /* 初期表示 */
        centerInfoBox(map.getCenter());
        /* ★表示している地図の中心位置が移動した時 */
        map.addEventListener('center_changed', callback);
        /* ★表示している地図の拡大縮小が変化した時 */
        map.addEventListener('zoom_changed', callback);
      },
      function() {
        // Failure callback
      }
    );
  });

  /* callback */
  function callback(){
    centerInfoBox(map.getCenter());
  };

  /* ★度分秒形式に変換して表示 */
  function centerInfoBox(ll) {
    /* 十進法形式から度分秒形式に計算 */
    var lat = degToDms(ll.lat);
    var lng = degToDms(ll.lng);

    var lng_txt = 'E '+lng.deg+'°'+lng.min+'′'+lng.sec+'″',
        lat_txt = 'N '+lat.deg+'°'+lat.min+'′'+lat.sec+'″';

    document.getElementById('lng-area').innerHTML = lng_txt;
    document.getElementById('lat-area').innerHTML = lat_txt;
  };

  /* 十進法形式から度分秒形式に計算 */
  function degToDms(ll_deg) {
    var cal_min = decimalPart(String(ll_deg)) * 60;
    var cal_sec = decimalPart(String(cal_min)) * 60;
    return {
      deg : parseInt(ll_deg),
      min : parseInt(cal_min),
      sec : cal_sec
    }
  };

  /* 小数点以下を取り出だして数値で返す */
  function decimalPart(num){
    numStr = num+'';
    dotIdx  = numStr.indexOf("."),
    result  = "0." + (dotIdx > -1 ? numStr.substring(dotIdx + 1) : "0");
    return  parseFloat( ((num>0)?'+':'-') + result );
  }
</script>
</head>
<body>
  <div id="ZMap" style="position: relative; max-width: calc(510px * 16 / 9); height:510px; border:1px solid #777777;">
    <div id='centerInfoBox'>
      <div id=wrpper>
        <div id='lng-area' style="white-space: nowrap;"></div>
        <div id='lat-area' style="white-space: nowrap;"></div>
      </div>
    </div>
  </div>
</body>
</html>