【初心者向け】ZENRIN Maps APIで地図上にマーカーを表示する

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

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

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

[ZENRIN Maps API の APIキー取得方法 - Qiita（2か月無料でお試しできます）](https://www.zenrin-datacom.net/solution/zenrin-maps-api/trial?fm_cp=6757baf3203e3a00bb118509&fm_mu=67639677affc4404b17d93fc&utm_campaign=6757baf3203e3a00bb118509&utm_medium=else&utm_source=Qiita25)

# 公式リファレンス
[地図描画（Mapクラス）](https://developers.zmaps-api.com/v20/reference/javascriptAPI/map.html)
[マーカー表示（Markerクラス）](https://developers.zmaps-api.com/v20/reference/javascriptAPI/marker.html)
[基本サンプル - マーカーを表示する](https://developers.zmaps-api.com/v20/reference/javascriptAPI/sample/widget_marker.html)

# 地図とマーカーを表示する基本コード
以下は、ZENRIN Maps APIで地図を表示し、指定した位置にマーカーを1つ表示するサンプルコードです。
このコードはそのままコピー＆ペーストで動作します（APIキーはご自身のものに置き換えてください）。
```html
<!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に読み込む。
```html
<script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
```

#### ②地図の準備
APIの初期化後、地図の表示エリア（例：#ZMap）を用意し、地図オブジェクトを生成する。
```javascript
map = new ZDC.Map(mapElement, mapOptions, onSuccess, onFailure);
```

#### ③地図の中心座標を設定
東京駅など、任意の緯度・経度で mapOptions.center を設定する。
```javascript
mapOptions.center = new ZDC.LatLng(35.681406, 139.767132);
```

#### ④マーカーの作成
ZDC.Marker でピン画像や位置情報を指定してマーカーを作成。
```javascript
  /* ★マーカーを作成 */
  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 で追加する。
```javascript
map.addWidget(mrk_widget);
```

コードを実行した結果は、以下になります。
![marker_sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4023353/53ba651b-f9f9-4c16-9043-89e8978055fa.png)

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

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