はじめに
地図にズームボタンやスケールバー、コンパスなどの操作パーツを表示したいと思ったことはありませんか？
本記事では、ZENRIN Maps API を使って、そうした「コントロール」を地図上に追加する方法をご紹介します。
コードを初めて触る方にもわかりやすいように、ステップごとに丁寧に解説しています。
ぜひ、サンプルを動かしながら試してみてください。
この記事でできること
- ZENRIN Maps APIを使って地図を描画する
- 地図上に以下のコントロールを表示する
- 拡大縮小ボタン（ZoomButton）
- コンパス（Compass）
- スケールバー（ScaleBar）
- コントロールの位置を指定する
公式リファレンス
- 地図描画 メインクラス（Map）
- コンパスのクラス（Compass）
- スケールバーのクラス（ScaleBar）
- 拡大縮小ボタンのクラス（ZoomButton）
- 基本サンプル - コントロールを表示する
- 基本サンプル - コントロールの表示位置を指定する
- 基本サンプル - コントロールを削除する
事前準備
ZENRIN Maps API を利用するには、事前に APIキーの取得が必要です。
現在、ZENRIN Maps API は 2か月間の無料トライアルが用意されており、期間中は主要な機能を実際にお試しいただけます。
開発や評価の初期段階でも安心してご利用いただけます。
APIキーの取得方法については、以下の記事で詳しく解説されています。
初めての方は、まずこちらをご覧いただき、APIキーの発行と設定を行ってください。
ZENRIN Maps APIの始め方 - Qiita（2か月無料でお試しできます）
フルサンプルコード
以下は、ZENRIN Maps APIで地図を表示し、指定した位置にコントロールを表示するサンプルコードです。
このコードはそのままコピー＆ペーストで動作します（APIキーはご自身のものに置き換えてください）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ZMA コントロールサンプル</title>
<style>
body { margin: 0; padding: 0; }
#ZMap { position: absolute; top: 0; bottom: 40px; width: 100%; }
#buttons { position: absolute; bottom: 0; height: 40px; width: 100%; background: #f4f4f4; text-align: center; line-height: 40px; }
button { margin: 0 10px; }
</style>
<script src="https://{DOMAIN}/zma_loader.js?key=YOUR_API_KEY&auth=referer"></script>
</head>
<body>
<div id="ZMap"></div>
<script src="js/zma_control.js"></script>
</script>
</body>
</html>
let map, scaleBar_ctl;
ZMALoader.setOnLoad(function(mapOptions, error) {
if (error) {
console.error(error);
return;
}
mapOptions.center = new ZDC.LatLng(35.681406, 139.767132); // 東京駅
mapOptions.zoom = 15;
map = new ZDC.Map(
document.getElementById('ZMap'),
mapOptions,
function() {
// 拡大縮小ボタン（左上）
map.addControl(new ZDC.ZoomButton('top-left'));
// コンパス（右上）
map.addControl(new ZDC.Compass('top-right'));
// スケールバー（左下）
scaleBar_ctl = new ZDC.ScaleBar('bottom-left');
map.addControl(scaleBar_ctl);
},
function() {
// Failure callback
}
);
});
ステップ1：基本HTMLと地図描画準備
まずはHTMLファイルを用意し、ZENRIN Maps APIのローダースクリプト（zma_loader.js）の読み込みを行います。
YOUR_API_KEY の部分には、自分のAPIキーを入力してください。
<script src="https://{DOMAIN}/zma_loader.js?key=YOUR_API_KEY&auth=referer"></script>
ステップ2：地図の表示と初期設定
地図の中心位置とズームレベルを設定します。
以下のコードでは「東京駅」を中心に地図を表示しています。
mapOptions.center = new ZDC.LatLng(35.681406, 139.767132); // 東京駅
mapOptions.zoom = 15;
ステップ3：各コントロールの追加
地図生成時に以下のようにコントロールを追加します。
// 拡大縮小ボタン（左上）
map.addControl(new ZDC.ZoomButton('top-left'));
// コンパス（右上）
map.addControl(new ZDC.Compass('top-right'));
// スケールバー（左下）
const scaleBar_ctl = new ZDC.ScaleBar('bottom-left');
map.addControl(scaleBar_ctl);
コントロールの位置は、以下のような値で指定できます：
top-left
top-right
bottom-left
bottom-right
コードを実行した結果は、以下になります。
おわりに
今回は、ZENRIN Maps API を使って地図に各種コントロールを表示する基本的な方法をご紹介しました。
ちょっとしたUIの追加で、地図の使いやすさがぐっと上がるのを感じていただけたのではないでしょうか。
今後も機能の活用方法やリリース情報を随時発信していきます。
ぜひフォローいただき、ZENRIN Maps APIの活用にお役立てください。