はじめに

この記事では、ZENRIN Maps APIを使用して、Webページ上に地図を表示し、任意の位置にマーカーを表示する基本手順を解説します。
ZENRIN Maps APIの導入が初めての方にもわかりやすいように、必要なHTMLとJavaScriptを一から記述しています。

この記事でできること

・ZENRIN Maps APIを使って地図を描画
・地図上にマーカーを表示
・コントロール（ズーム・スケールバー・コンパス）の表示

APIキー取得手順

ZENRIN Maps APIを使用するには、APIキーの取得が必要です。
APIキーの取得方法については、以下の記事で詳しく解説されていますので、まずはこちらをご覧ください。

ZENRIN Maps APIの始め方

公式リファレンス

地図描画（Mapクラス）
マーカー表示（Markerクラス）
基本サンプル - マーカーを表示する

地図とマーカーを表示する基本コード

以下は、ZENRIN Maps APIで地図を表示し、指定した位置にマーカーを1つ表示するサンプルコードです。
このコードはそのままコピー＆ペーストで動作します（APIキーはご自身のものに置き換えてください）。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ZENRIN Maps API - マーカー表示サンプル</title>
  <style>
    body {margin: 0; padding: 0;}
    #ZMap {position: absolute; top: 0; bottom: 0; width: 100%;}
  </style>

  <!-- ローダーを読み込む：APIキーを必ずご自身のものに変更してください -->
  <script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
</head>
<body>
  <div id="ZMap"></div>

  <script>
    // オブジェクト
    var map, mrk_widget;

    // 中心点（東京駅）
    const lat = 35.681406, lng = 139.767132;
    const mapElement = document.getElementById('ZMap');

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

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

      // 地図生成
      map = new ZDC.Map(
        mapElement,
        mapOptions,
        function () {
          // 地図生成成功時のコールバック

          // コントロール追加
          map.addControl(new ZDC.ZoomButton('bottom-right', new ZDC.Point(-20, -35)));
          // 右上 コンパス
          map.addControl(new ZDC.Compass('top-right'));
          // 左下 スケールバー
          map.addControl(new ZDC.ScaleBar('bottom-left'));

          /* ★マーカーを作成 */
          mrk_widget = new ZDC.Marker(
//            new ZDC.LatLng(lat, lng),
//            {
//              styleId: ZDC.MARKER_COLOR_ID_GREEN_S
//            }
//          );

          map.getCenter(), // Mapの中心位置(latlng)
          {
            custom: {
            base : {
              imgSrc: '../img/icon_pin_blue.png',
              imgSize:new ZDC.Point(30,40),
              imgPos: new ZDC.Point(-13, -38)
            }
            }
          }
        );
        // MarkerをMapに追加
        map.addWidget(mrk_widget);
        },
        function () {
          // 地図生成失敗時のコールバック
          console.error('地図の生成に失敗しました');
        }
      );
    });
  </script>
</body>
</html>

ステップごとの解説

①APIの読み込み

ZENRIN Maps APIのローダースクリプト（zma_loader.js）をHTMLに読み込む。

<script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>

②地図の準備

APIの初期化後、地図の表示エリア（例：#ZMap）を用意し、地図オブジェクトを生成する。

map = new ZDC.Map(mapElement, mapOptions, onSuccess, onFailure);

③地図の中心座標を設定

東京駅など、任意の緯度・経度で mapOptions.center を設定する。

mapOptions.center = new ZDC.LatLng(35.681406, 139.767132);

④マーカーの作成

ZDC.Marker でピン画像や位置情報を指定してマーカーを作成。

  /* ★マーカーを作成 */
  mrk_widget = new ZDC.Marker(
  map.getCenter(), // Mapの中心位置(latlng)
  {
    custom: {
    base : {
      imgSrc: '../img/icon_pin_blue.png',
      imgSize:new ZDC.Point(30,40),
      imgPos: new ZDC.Point(-13, -38)
    }
    }
  }
);

⑤マーカーを地図に追加

作成したマーカーを地図オブジェクトに addWidget で追加する。

map.addWidget(mrk_widget);

コードを実行した結果は、以下になります。

おわりに

ZENRIN Maps API は、地図の表示はもちろん、建物や道路といった詳細情報まで高精度に扱える地図APIです。
本記事では、APIキーの取得から、地図表示、マーカー追加の基本的な実装までをご紹介しました。
マーカーは今回のように単体で設置するだけでなく、複数のマーカーを扱いたい場合は MarkerCluster クラスを活用することで、地図上に多くのマーカーを効率的に表示することも可能です。
以下の公式リファレンスもぜひご覧ください。
複数マーカーの表示（MarkerCluster クラス）

今後も機能の活用方法やリリース情報を随時発信していきます。
ぜひフォローいただき、ZENRIN Maps APIの活用にお役立てください。