はじめに
この記事では、ZENRIN Maps APIを使用して、Webページ上に地図を表示し、任意の位置にマーカーを表示する基本手順を解説します。
ZENRIN Maps APIの導入が初めての方にもわかりやすいように、必要なHTMLとJavaScriptを一から記述しています。
この記事でできること
・ZENRIN Maps APIを使って地図を描画
・地図上にマーカーを表示
・コントロール（ズーム・スケールバー・コンパス）の表示
APIキー取得手順
ZENRIN Maps APIを使用するには、APIキーの取得が必要です。
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の活用にお役立てください。