今回は、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 お申込みフォーム
コード解説
ここでは、ZENRIN Maps API を利用して、地図上で大型車ルート検索表示を行う方法を説明します
ZENRIN Maps API の初期化とルート検索
route_zma.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:
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}®ulation_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
参考サイト
まとめ：
本記事では、ZENRIN Maps API を利用して大型車のルート検索を行い、地図上に表示する方法について解説しました。ZENRIN Maps API は、日本国内の詳細な地理データと交通規制を考慮したルート検索が可能であり、大型車向けのルート検索に適しています。
今後、さらに高度なルート検索や異なる API との比較を行いたい場合は、公式リファレンスを活用してみてください。