ZENRIN Maps API を使用した大型車ルート検索


今回は、ZENRIN Maps API を使用して大型車のルート検索を行い、その経路を表示する方法について解説します。

# サービスの概要

ZENRIN Maps API は、日本国内での詳細な地図データを提供する API です。これを利用すると、地図上に位置情報を表示したり、目的地までのルートを検索したりすることができます。また、特定の車両に適したルート検索も可能であり、この記事では大型車専用のルートを検索する方法を説明します。

# 対象読者

‣地図 API を使ったウェブ開発に興味がある開発者

‣ZENRIN Maps API を使った大型ルート検索・表示機能を実装したい方

‣学生・初心者 - 地図 API やルート計算の学習をしたい方。

# API キーの取得
# 1.ZENRIN Maps API

．検証用 ID とパスワード（PW）取得

ZENRIN Maps API を利用するには、検証用 ID とパスワード（PW）を取得し、API キーを取得する必要があります。以下のリンクから申請・取得を行ってください

[ZENRIN Maps API 　無料お試し ID 　お申込みフォーム](https://www.zenrin-datacom.net/solution/zenrin-maps-api/trial?fm_cp=6757baf3203e3a00bb118509&fm_mu=67639ec108b9bc067a41d99d&utm_campaign=6757baf3203e3a00bb118509&utm_medium=else&utm_source=Qiita42)

[ コンソール](https://test-console.zmaps-api.com/)

[ZENRIN Maps API リファレンス](https://developers.zmaps-api.com/v20/reference/)

# コード解説

ここでは、ZENRIN Maps API 　を利用して、地図上で大型車ルート検索表示を行う方法を説明します

# ZENRIN Maps API の初期化とルート検索

### route_zma.html:

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大型車ルート検索</title>

    <!-- ZENRIN Maps API -->
    <script src="https://test-js.zmaps-api.com/zma_loader.js?key=[YOUR_API_KEY]&auth=[認証方式]"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        display: flex;
      }

      #ZMap {
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="ZMap"></div>
    <script src="route_ZMA_streetView.js" type="text/javascript"></script>
  </body>
</html>
```

### route_zma.js:

```javascript
let map;

// Initialize ZMap API
ZMALoader.setOnLoad(function (mapOptions, error) {
  if (error) return console.error(error);

  mapOptions.center = new ZDC.LatLng(35.6672, 139.9856);
  mapOptions.mouseWheelReverseZoom = true;
  mapOptions.zoom = 12;

  map = new ZDC.Map(
    document.getElementById("ZMap"),
    mapOptions,
    function () {
      const start = new ZDC.LatLng(35.6329, 139.8804); // 東京ディズニーランド
      const destination = new ZDC.LatLng(35.7014, 140.0908); // 八千代台駅

      // 地図にコントロールを追加
      map.addControl(new ZDC.ZoomButton("top-left"));
      map.addControl(new ZDC.ScaleBar("bottom-left"));

      // 出発点と目的地のマーカーを追加
      const startMarker = new ZDC.Marker(start, {
        styleId: ZDC.MARKER_COLOR_ID_BLUE_L,
      });
      const endMarker = new ZDC.Marker(destination, {
        styleId: ZDC.MARKER_COLOR_ID_RED_L,
      });
      map.addWidget(startMarker);
      map.addWidget(endMarker);

      // ZMap API経由でルート検索
      fetch(
        `https://test-web.zmaps-api.com/route/route_mbn/drive_ptp?search_type=1&from=${start.lng},${start.lat}&to=${destination.lng},${destination.lat}&regulation_type=121200&toll_type=large`,
        {
          method: "GET",
          headers: {
            "x-api-key": "[YOUR_API_KEY]",
            Authorization: "[認証方式]",
          },
        }
      )
        .then((response) => response.json())
        .then((data) => {
          if (data.status === "OK" && data.result?.item?.length > 0) {
            console.log(data);
            const decodedPath = data.result.item[0].route?.link?.flatMap(
              (link) =>
                link.line.coordinates.map(
                  (coord) => new ZDC.LatLng(coord[1], coord[0])
                )
            );
            if (decodedPath?.length) {
              map.addWidget(
                new ZDC.Polyline(decodedPath, {
                  color: "blue",
                  width: 4,
                  opacity: 1,
                })
              );
            } else {
              console.error("No decoded route data.");
            }
          } else {
            console.error("Failed to fetch route.", data);
          }
        })
        .catch(console.error);
    },
    function () {
      console.error("地図の生成に失敗しました。");
    }
  );
});
```

# 主要部分の説明：

**地図の初期化**

ここでは、地図を初期化するための設定を行っています。  
ZMALoader.setOnLoad()で地図を初期化し、ズームレベルと  
マウスホイールでのズームを反転させています。

**fetch リクエスト**

出発地点（東京ディズニーランド）と目的地（八千代台駅）の座標を指定して、ZENRIN Maps API に GET リクエストを送信します。

regulation_type=121200 と toll_type=large は、大型車向けのルート検索および有料道路設定を指定しています。

**ルートの描画**

レスポンスが "OK" で、ルート情報が取得できた場合、その座標データを ZDC.LatLng オブジェクトに変換して、地図上に経路を描画します。

**エラーハンドリング**
レスポンスにルート情報が含まれていない場合や、fetch の途中でエラーが発生した場合にエラーメッセージをコンソールに出力します。

# 地図表示

**ZENRIN Maps API**
[参考サイト](https://bikram-pandey.github.io/web_projects/large_vehicle_route_search_zma.html)

![スクリーンショット 2025-02-25 174457.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3981270/7d7720bc-c516-4793-9f25-ab19cc38d0c2.png)


# まとめ：

本記事では、ZENRIN Maps API を利用して大型車のルート検索を行い、地図上に表示する方法について解説しました。ZENRIN Maps API は、日本国内の詳細な地理データと交通規制を考慮したルート検索が可能であり、大型車向けのルート検索に適しています。

今後、さらに高度なルート検索や異なる API との比較を行いたい場合は、公式リファレンスを活用してみてください。