地図領域の大きさを変更する

実行結果

次の例では、ボタンを押した際に地図領域の大きさと表示位置を変更します。

top: left: width: height:

ソースコードと解説

地図領域の変更を反映するには、ZDC.MapクラスのrefreshSize()を利用します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ローダーのURLをscriptでロードする -->
<script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
<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.ZoomButton('top-left'));
        // 右上 コンパス
        map.addControl(new ZDC.Compass('top-right'));
        // 左下 スケールバー
        map.addControl(new ZDC.ScaleBar('bottom-left'));

      },
      function() {
        // Failure callback
      }
    );
  });

  /* 指定した大きさと位置に地図を表示する */
  function refresh() {
      /* 地図のプロパティを変更 */
      document.getElementById('ZMap').style.top = Number(document.getElementById('t').value) + 'px';
      document.getElementById('ZMap').style.left = Number(document.getElementById('l').value) + 'px';
      document.getElementById('ZMap').style.width = Number(document.getElementById('w').value) + 'px';
      document.getElementById('ZMap').style.height = Number(document.getElementById('h').value) + 'px';

      // 地図表示位置スペース用
      document.getElementById('ZMap_block').style.height = Number(document.getElementById('t').value) + 'px';
      document.getElementById('ZMap_block').style.width = parseInt(document.getElementById('ZMap').style.width) + Number(document.getElementById('l').value) + 'px';

      /* ★対応して地図を取得 */
      map.refreshSize();
  };

</script>
</head>

<body>
  <div id="ZMap" style="position: relative; max-width: calc(510px * 16 / 9); height:510px; border:1px solid #777777; position: relative;"></div>
  <div id="ZMap_block"></div>
  <div class="mb-2" id="IBox">
    <nobr>top: <input type="text" id="t" size="5" value="0"> </nobr>
    <nobr>left: <input type="text" id="l" size="5" value="100"> </nobr>
    <nobr>width: <input type="text" id="w" size="5" value="400"> </nobr>
    <nobr>height: <input type="text" id="h" size="5" value="300"> </nobr>
    <input type="button" value="refresh" onclick="refresh();">
  </div>
</body>
</html>