はじめに
ZENRIN Maps APIは、日本全国をカバーした詳細な地図情報と、柔軟なカスタマイズが可能なJavaScriptライブラリを提供しています。
この記事では、地図を操作する中でよく利用される「イベントリスナー」の基本的な使い方をご紹介します。
クリックでマーカーを表示したり、地図のズーム変更や移動完了のタイミングを検知したりといった処理を、実際に動くサンプルコードを通して確認していきます。
初めてZENRIN Maps APIを触る方でも、地図と少し仲良くなれるような第一歩になれば幸いです。
この記事でできること
・ZENRIN Maps APIを使って地図を描画する
・地図クリック時にマーカーを設置する
・地図の移動完了・ズーム変更イベントの取得する
・イベントリスナーを削除する
APIキー取得手順
ZENRIN Maps API を利用するには、事前に APIキーの取得が必要です。
現在、ZENRIN Maps API は 2か月間の無料トライアルが用意されており、期間中は主要な機能を実際にお試しいただけます。
開発や評価の初期段階でも安心してご利用いただけます。
APIキーの取得方法については、以下の記事で詳しく解説されています。
初めての方は、まずこちらをご覧いただき、APIキーの発行と設定を行ってください。
公式リファレンス
サンプル全体構成
以下の構成でファイルを準備してください。
project/
├── zma_event.html
├── js/
│ └── zma_event.js
└── img/
└── icon_pin_blue.png
ステップ① HTMLファイルの作成（index.html）
まず、地図と操作用のボタンを配置するHTMLを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ZMA イベントとマーカーサンプル</title>
<style>
body { margin: 0; padding: 0; }
#ZMap { position: absolute; top: 0; bottom: 50px; width: 100%; }
#control { position: absolute; bottom: 0; width: 100%; height: 50px; background: #f0f0f0; text-align: center; line-height: 50px; }
</style>
<!-- ZMAのスクリプトを読み込み（リファラ認証キーを使用） -->
<script src="https://test-js.zmaps-api.com/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
</head>
<body>
<div id="ZMap"></div>
<div id="control">
<button onclick="removeMapEvents()">イベントリスナーを削除</button>
</div>
<script src="js/zma_event.js"></script>
</body>
</html>
[APIキー] は、取得済みのAPIキーを記載してください。
[認証方式]は、認証方式を記載してください。
ステップ② JavaScriptの作成（js/zma_event.js）
以下のコードでは、ZENRIN Maps APIのイベントリスナーを使い、クリック時にマーカーを配置し、ズームや移動完了イベントを検知する処理を実装しています。
let map;
let marker = null;
let clickHandler, idleHandler, zoomHandler;
ZMALoader.setOnLoad(function (mapOptions, error) {
if (error) {
console.error(error);
return;
}
// 地図の初期位置とズームレベルを設定
mapOptions.center = new ZDC.LatLng(35.681236, 139.767125); // 東京駅付近
mapOptions.zoom = 15;
map = new ZDC.Map(
document.getElementById('ZMap'),
mapOptions,
function () {
console.log('✅ 地図の初期化完了');
// ① 地図クリック時にマーカーを設置
clickHandler = function (e) {
const latlng = e.latlng;
if (!latlng) {
console.warn('latlng が取得できませんでした', e);
return;
}
console.log('🗺️ マップをクリック:', latlng.toString());
// 既存マーカーを削除
if (marker) map.removeWidget(marker);
// 新しいマーカーを生成
marker = new ZDC.Marker(latlng, {
title: 'クリックされた位置',
custom: {
base: {
imgSrc: '../img/icon_pin_blue.png',
imgSize: new ZDC.Point(24, 32),
imgPos: new ZDC.Point(-12, -32)
}
}
});
// マーカークリックイベント
marker.addEventListener('click', () => {
alert('📍 このマーカーがクリックされました');
});
map.addWidget(marker);
};
map.addEventListener('click', clickHandler);
// ② 地図移動完了イベント
idleHandler = function () {
const center = map.getCenter();
console.log('📍 地図移動完了:', center.toString());
};
map.addEventListener('idle', idleHandler);
// ③ ズーム変更イベント
zoomHandler = function () {
console.log('🔍 ズーム変更:', map.getZoom());
};
map.addEventListener('zoom_changed', zoomHandler);
},
function () {
console.error('❌ 地図の生成に失敗しました');
}
);
});
// ④ イベントリスナー削除関数
function removeMapEvents() {
if (map) {
if (clickHandler) map.removeEventListener('click', clickHandler);
if (idleHandler) map.removeEventListener('idle', idleHandler);
if (zoomHandler) map.removeEventListener('zoom_changed', zoomHandler);
console.log('🛑 イベントリスナーを削除しました');
}
}
コードを実行した結果は、以下になります。
おわりに
今回は、ZENRIN Maps APIを使って、地図上でのクリックやズーム操作といったイベントを検知し、マーカーの表示などに活用する基本的な実装方法をご紹介しました。
地図を操作する中で「どのタイミングで何をするか」を制御することは、ユーザーにとって使いやすい地図サービスを作るうえで欠かせない要素です。
ZENRIN Maps APIのイベント機能を活用することで、よりインタラクティブで柔軟な地図アプリケーションの構築が可能になります。
今後、さらに複雑な処理や独自のUIを組み込みたい場合にも、今回の内容がその土台となればうれしく思います。