🗺️【開催レポート】ZENRIN Maps API ハンズオン #1 を開催しました！

2025/11/12 に「ZENRIN Maps API ハンズオン #1（JavaScript編）」 を開催しました。
多くの方にご参加いただき、ありがとうございました。

本記事では、
・当日の実習内容
・参加者から寄せられたQ&A
・運営の学び
・次回に向けた改善点
をまとめています。

初回ハンズオンの雰囲気が伝わればうれしいです。

🎯 ハンズオンの目的

今回のテーマは「JavaScriptで地図を表示できるようになること」です。

実習では下記の内容を取り扱いました。

• APIキーの取得と認証設定（IP／Referer／OAuth）
• 地図の初期表示（位置・ズーム・地図タイプ）
• コントロール（ズーム／スケールバー／コンパス）の追加
• マーカーやイベント処理（クリック、移動）
• 住宅地図の確認（Lv18以上）

🧑‍💻 実習の流れ

当日は VS Code + Live Server を使い、ローカルで地図表示を行いました。
以下に実習のステップを抜粋します。

① APIキーの設定（管理コンソール）

管理コンソールにログインし、

• チャネル設定
• 認証方式（IP／Referer）
• APIキーの取得
  を行います。

初心者の方にも分かりやすいよう、資料では画面キャプチャを多数使って説明しました。

② 地図を表示してみよう（demo_map.js）

JavaScriptで以下を設定。

const map = new ZDC.Map({
  div: "map",
  latlng: new ZDC.LatLng(35.681406, 139.767132), // 東京駅
  zoom: 15
});

APIキーが正しく設定できれば、
ブラウザ上に地図が表示されます！

③ 初期位置の変更

参加者には、好きな場所の座標を入力してもらいました。
例：東京スカイツリー

new ZDC.LatLng(35.7100578, 139.8107308);

④ ズームレベルの体験

• Lv11：広域
• Lv15：市街地
• Lv18：詳細（住宅地図）
  住宅地図は Lv18以上で表示 されるため、地図の変化が最も分かりやすい実習となりました。

⑤ 地図タイプを変更

標準、英語版、モノクロ、住宅地図など複数タイプを比較。
用途に応じたデザイン選択の重要性を紹介しました。

⑥ コントロールの追加・イベント実装

• ズームボタン
• スケールバー
• コンパス
• クリックイベント
• マーカードラッグ
  など、アプリでよく利用される操作を体験。

🙋‍♂️ 当日の Q&A ピックアップ

参加者から寄せられた質問の中から、特に多かったものをまとめます。

❓ Pythonプログラムから直接API呼び出しできますか？

→ できます。
　webAPIの画像出力 (WMTS) を利用すればお客さまの環境からも呼び出せます。

❓ 日本測地系（Tokyo Datum）に対応していますか？

→ デフォルトは JGD2011（世界測地系）ですが、日本測地系も指定可能 です。

❓ 測地系変換（世界測地系⇔日本測地系）はできますか？

→ 座標変換（convert_crs） で変換できます。

❓ ハザードマップ・物流ルート検索はどう実装しますか？

以下のAPIを組み合わせると実現できます。
ハザードマップ：画像レイヤーのクラス（ImageLayer）
自動車ルート：自動車ルート検索2.0（drive_ptp）
ルート描画：ポリラインのクラス（Polyline）

❓ 最短ルートの距離は取得できますか？

→ 自動車ルート検索2.0（drive_ptp） or 歩行者ルート検索2.0（route_mbn/walk） から距離を取得できます。

❓ APIキーを隠す方法はありますか？

→ jsやプログラムに載せる必要あるので隠せません。
但し、実際に地図を表示したりwebapiにリクエストをする場合は、
apikeyの他にIP/リファラ/OAuth認証、のいずれかの認証を満たす必要がありますので、
apikeyのみが流出した場合は不正利用されることはありません。

🧭 ハンズオンを通じて得られた“学び”

今回のハンズオンでは、
参加者の方々がさまざまな視点から ZENRIN Maps API を体験してくださり、
実習後には次のような“学び”が共有されました。

■ 「地図が実際に動くと API理解が進む」

コードを少し変えるだけで、
初期位置・ズーム・地図タイプが変わる体験を通して、

「パラメータの意味が直感的に理解できた」
「仕様書を読むより分かりやすかった」

といった声が多く見られました。

■ 「住宅地図のレベル表現の違いが面白い」

Lv18 以上で表示される住宅地図や、地図の傾き・回転といった操作は、
紙地図では得られない“リアルな地図表現”を体験するきっかけに。

■ 「JavaScript での実装イメージが掴めた」

実習では API をただ説明するだけでなく、
イベント処理・マーカー操作・コントロール追加まで触れたことで、

「業務システムにどう組み込むか想像しやすくなった」

という声も多く見られました。

📈 まとめ：初めての方にも参加しやすいハンズオンを目指します

今回のハンズオンでは、
「地図を表示できるところまでを、全員で完成させる」
というシンプルなゴールに向けて進めました。
アンケートでは、

• 「初めて触ったが、地図を表示できて嬉しかった」
• 「APIの仕組みがよく分かった」
• 「住宅地図が面白かった」
  などの声を多数いただき、初回として非常に良い反応をいただきました。

一方で、
“もっと参加しやすくなる余地” も見つかりました。
そこで次回は、

• 資料・コードの事前配布をより分かりやすく
• 質問しやすい進行とサポート体制の強化
• 少し遅れて参加してもキャッチアップできる導入パート
• 入室直後の雰囲気づくり（ガイド表示や案内）
  といった改善を実施し、
  初参加の方でも安心して参加できるようにブラッシュアップ していきます。

ZENRIN Maps API は、
不動産・物流・防災・小売など、業務活用の幅が非常に広いAPIです。
「まずは動かしてみたい」「地図を触ってみたい」という方に、今後も分かりやすく学んでいただける場を提供していきます。

📢 次回のハンズオンも準備中です

次回は
「検索API × 地図表示」
をテーマに予定しています。

より実践的な内容に踏み込みながら、
初心者の方でも迷わず手を動かせる構成に仕上げる予定です。

開催告知は Qiita でもお知らせしますので、ぜひフォローしてお待ちください！