はじめに
地図アプリを利用するとき、多くの方はマウスやタッチ操作でスクロールして
「ズームレベル（縮尺レベル）」を変更していると思います。
ただ、ズームレベルによっては市区町村単位まで見渡せたり、周辺の建物まで詳細に表示されたりと、
どのレベルでどのように見えるのかは実際に操作してみないと分かりにくいものです。
地図上に追加できる要素としてはマーカーなどが真っ先に思い浮かびますが、
今回は「ズームレベルをプルダウンで選択できるフォーム」を作成してみます。
これによって、各ズームレベルでの見え方を直感的に確認できるようになります 👀
ZENRIN Maps API について
ZENRIN Maps API は、ゼンリンが全国で収集・整備した多様な情報を一元管理する
時空間データベースを基盤とした、幅広い用途に対応可能な地図・位置情報サービスで、
Web API / JavaScript API を通じてさまざまなアプリケーションに活用できます。
利用には事前の申し込みが必要ですが、初めての方は2か月間無料で試すことが可能です✨
具体的な利用開始手順は以下の記事が参考になりますので、ぜひご確認ください。
地図にズームレベル選択フォームを作成
地図の表示倍率を変更するには、ZDC.MapクラスのsetZoom(zoom)メソッドを使用します。
今回は、中心点の緯度経度を指定するをベースに、
ズームレベルをプルダウンで選択できるフォームを追加していきます。
コード全体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地図ズームコントロール</title>
<link rel="stylesheet" href="styles.css">
<!-- ZENRIN Maps API のローダーを読み込み -->
<script src="https://test-js.zmaps-api.com/zma_loader.js?key=[APIキー]&auth=ip"></script>
</head>
<body>
<div id="ZMap"></div>
<div class="zoom-controls">
<div class="control-group">
<label for="zoomLevel">縮尺レベル:</label>
<select id="zoomLevel" onchange="setZoomFromSelect()"></select>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
// 地図オブジェクトの変数
var map;
// 中心点の緯度経度（東京駅）
const lat = 35.681406, lng = 139.767132;
// ズームレベルオプションを生成する関数
function createZoomOptions() {
const select = document.getElementById('zoomLevel');
for (let i = 11; i <= 22; i++) {
const option = document.createElement('option');
option.value = i;
option.textContent = i;
if (i === 11) option.selected = true;
select.appendChild(option);
}
}
// ZMALoader
ZMALoader.setOnLoad(function (mapOptions, error) {
if (error) {
console.error(error);
return;
}
// 地図の中心を東京駅に設定
mapOptions.center = new ZDC.LatLng(lat, lng);
// 初期ズームレベルを14に設定
mapOptions.zoom = 14;
// 地図オブジェクトを作成
map = new ZDC.Map(
document.getElementById('ZMap'), // 中心点の緯度経度を設定
mapOptions,
function() {
// Success callback
// コントロールを追加する
// 左上 拡大縮小ボタン
map.addControl(new ZDC.ZoomButton('top-left'));
// 右上 コンパス
map.addControl(new ZDC.Compass('top-right'));
// 左下 スケールバー
map.addControl(new ZDC.ScaleBar('bottom-left'));
// ズームレベルオプションを生成
createZoomOptions();
// 初期ズームレベルを14に設定
map.setZoom(14);
},
function() {
console.error("地図初期化失敗");
}
);
});
// プルダウンでズームレベルが選択された時の処理
function setZoomFromSelect() {
// 選択されたズームレベルを取得
const zoomLevel = parseInt(document.getElementById('zoomLevel').value);
// 地図オブジェクトが存在し、有効なズームレベルである場合
if (map && !isNaN(zoomLevel)) {
try {
// 地図のズームレベルを設定
map.setZoom(zoomLevel);
console.log(`ズームレベルを ${zoomLevel} に設定しました`);
} catch (error) {
// ズーム設定に失敗した場合のエラーハンドリング
console.error(`ズームレベル ${zoomLevel} の設定に失敗しました:`, error);
}
}
}
/* ページ全体のスタイル */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/* 地図コンテナのスタイル */
#ZMap {
position: absolute;
width: 100%;
height: 100%;
}
/* ズームコントロールパネルのスタイル */
.zoom-controls {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.9);
padding: 15px;
z-index: 1000;
width: 150px;
}
/* ラベルのスタイル */
.control-group label {
display: block;
margin-bottom: 3px;
font-weight: bold;
color: #333;
font-size: 12px;
}
/* セレクトボックスのスタイル */
.control-group select {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
font-size: 12px;
box-sizing: border-box;
}
ズームレベル別の表示と解説
ズームレベル別の地図表示
上記のコードを実行すると、地図画面の右下にズームレベルをプルダウン形式で選択できるフォームが表示されます。ここから任意のズームレベルを選ぶことで、地図の見え方を切り替えることができます。
🔎 ズームレベル 12
高速道路や線路が目立ちます🛣
広域で道路網を確認したいときに便利です。
🔎 ズームレベル 14（デフォルト）
パーキングやガソリンスタンド、小学校やお寺など記号がパッと目につきます⛽
町全体の施設を確認したいときに適しています。
🔎 ズームレベル 16
細かい道路や駅の出入り口情報が見えます🚉
東京駅周辺のルート確認に最適です。
🔎 ズームレベル 18
東京駅がかなりアップで表示されます🏢
建物名や建物の形まで確認でき、目的地をピンポイントで探すときに便利です。
ズームレベルまとめ表
一覧で比較すると、ズームレベルごとの特徴が一目で分かります。
| ズームレベル | 主な見え方 | 利用シーン |
|---|---|---|
| 12 | 高速道路・線路が目立つ | 広域の道路網を把握したいとき |
| 14 | 駐車場や学校などの記号 | 町全体の施設を確認したいとき |
| 16 | 細かい道路・駅出入口 | 駅周辺のルートを確認したいとき |
| 18 | 建物名・建物形状まで表示 | 目的地をピンポイントで探したいとき |
利用用途によって適したズームレベルは異なります。
今回はこの4つをピックアップしましたが、他のズームレベルでもぜひ試してみてください！