2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@zdc_m-sato(佐藤 美咲)in株式会社ゼンリンデータコム

【初心者向け】ZENRIN Maps APIを使って楕円を地図に表示する

2
Last updated at Posted at 2025-08-25

はじめに

今回は、ZENRIN Maps API を使って地図上に「楕円（Oval）」を表示する方法をご紹介します。
地図上に図形を描画することで、特定のエリアを視覚的に強調したり、補足情報をわかりやすく伝えたりすることができます。
初心者の方にもわかりやすいよう、ステップごとに解説していきますので、地図描画に少しでも興味のある方はぜひ最後までご覧ください。

この記事でできること

  • ZENRIN Maps APIを使って地図を描画
  • 指定中心座標から楕円を描画
  • ボタンで楕円の追加・削除を切り替え
  • クリックでアラートを表示

APIキー取得手順

ZENRIN Maps API を利用するには、事前に APIキーの取得が必要です。
現在、ZENRIN Maps API は2か月間の無料トライアルが用意されており、期間中は主要な機能を実際にお試しいただけます。
開発や評価の初期段階でも安心してご利用いただけます。
APIキーの取得方法については、以下の記事で詳しく解説されています。
初めての方は、まずこちらをご覧いただき、APIキーの発行と設定を行ってください。
ZENRIN Maps APIの始め方

公式リファレンス

ディレクトリ構成（ツリー形式）

project-root/
├── zma_oval.html
└── js/
    └── zma_oval.js

楕円を表示する基本コード

以下は、ZENRIN Maps APIで地図を表示し、楕円を表示するサンプルコードです。
このコードはそのままコピー＆ペーストで動作します（APIキーはご自身のものに置き換えてください）。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>楕円表示サンプル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://test-js.zmaps-api.com/zma_loader.js?key=[APIキー]&auth=referer"></script>
  <link rel="stylesheet" href="css/zma_oval.css">
</head>
<body>
  <div id="ZMap"></div>
  <div id="controls">
    <button id="addBtn" onclick="addOval()">楕円を表示</button>
    <button id="clearBtn" onclick="clearOval()">楕円を削除</button>
    <p id="status">地図を読み込み中...</p>
  </div>
  <script src="js/zma_oval.js"></script>
</body>
</html>
zma_oval.css
body {
  margin: 0;
  font-family: sans-serif;
}
#ZMap {
  width: 100%;
  height: 80vh;
}
#controls {
  padding: 10px;
  background-color: #f5f5f5;
}
button {
  margin-right: 10px;
}
zma_oval.js
const lat = 35.681406, lng = 139.767132;
const mapElement = document.getElementById('ZMap');
let map;
let oval;

ZMALoader.setOnLoad(function(mapOptions, error) {
  if (error) {
    console.error(error);
    return;
  }

  mapOptions.center = new ZDC.LatLng(lat, lng);
  mapOptions.zoom = 16;

  map = new ZDC.Map(mapElement, mapOptions, function () {
    console.log('地図が初期化されました');

    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'));

    document.getElementById('status').textContent = '地図の読み込み完了';
  }, function () {
    console.error('地図の生成に失敗しました');
    document.getElementById('status').textContent = '地図の読み込みに失敗しました';
  });
});

function addOval() {
  if (!map || oval) return;

  const center = map.getCenter();
  const radius = { x: 200, y: 200 }; // 半径（x: 横方向, y: 縦方向）単位はメートル
  const options = {
    fill: "#0000FF",
    stroke: "#00FF00",
    strokeWidth: 5,
    opacity: 0.4
  };

  oval = new ZDC.Oval(center, radius, options);

  map.addWidget(oval);

  oval.addEventListener('click', function () {
    alert('楕円がクリックされました！');
  });

  console.log('楕円を追加しました');
}

function clearOval() {
  if (!map || !oval) return;

  try {
    map.removeWidget(oval);
    oval = null;
    console.log('楕円を削除しました');
  } catch (e) {
    console.warn('楕円の削除に失敗:', e);
  }
}

コードを実行した結果は、以下になります。
oval_sample.png

ステップごとの解説

Step 1：初期設定

const lat = 35.681406, lng = 139.767132;
const mapElement = document.getElementById('ZMap');
let map;
let oval;
  • 地図の中心座標（今回は東京駅付近）を設定
  • 地図を描画するHTML要素を取得
  • map や oval をグローバル変数として宣言

Step ２：地図の初期化

const lat = 35.681406, lng = 139.767132;
const mapElement = document.getElementById('ZMap');
let map;

ZMALoader.setOnLoad(function(mapOptions, error) {
  if (error) {
    console.error(error);
    return;
  }

  // 地図の中心とズームレベルを設定
  mapOptions.center = new ZDC.LatLng(lat, lng);
  mapOptions.zoom = 16;

  // Mapインスタンスを生成
  map = new ZDC.Map(mapElement, mapOptions, function () {
    console.log('地図が初期化されました');

    // コントロールを追加
    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'));

    // ステータス表示を更新
    document.getElementById('status').textContent = '地図の読み込み完了';
  }, function () {
    console.error('地図の生成に失敗しました');
    document.getElementById('status').textContent = '地図の読み込みに失敗しました';
  });
});
  • lat, lngで東京駅周辺の緯度経度を指定しています。
  • mapOptions.centerで地図の表示開始位置を指定します。
  • mapOptions.zoomで初期ズームレベルを設定します。数字が大きいほど拡大表示になります。
  • new ZDC.Map(...) が地図を描画するためのメイン処理です。
  • map.addControl(...) でズームボタン、コンパス、スケールバーを追加しています。

Step ３：楕円の追加（addOval()関数）

function addOval() {
  if (!map || oval) return;
  const center = map.getCenter();
  oval = new ZDC.Oval({
    map: map,
    center: center,
    radius: [2000, 2000],
    fill: "#0000FF",             // 青で塗りつぶし
    strokeColor: "#00FF00",      // 緑の枠線
    strokeWeight: 5,
    fillOpacity: 0.4,
    strokeOpacity: 1.0
  });
  map.addWidget(oval);

  oval.addEventListener('click', function () {
    alert('楕円がクリックされました！');
  });

  console.log('楕円を追加しました');
}
  • map.getCenter() で現在の地図中心を取得
  • ZDC.Oval を使って半径2kmの楕円を作成
  • fill プロパティを "#0000FF" にして青い塗りに
  • addWidget() で地図に楕円を追加
  • 楕円クリック時のイベントも設定

Step ４：楕円の削除（clearOval()関数）

function clearOval() {
  if (!map || !oval) return;
  try {
    map.removeWidget(oval);
    oval = null;
    console.log('楕円を削除しました');
  } catch (e) {
    console.warn('楕円の削除に失敗:', e);
  }
}
  • 地図上の楕円を removeWidget() で削除
  • 削除後は oval = null に戻すことで、再追加を可能に

おわりに

ここまでご覧いただきありがとうございました。
楕円の描画は地図表現の一例にすぎませんが、このような図形を組み合わせることで、地図アプリケーションの表現力や訴求力を高めることが可能です。

「他の図形も描画してみたい」「別の活用方法を知りたい」と感じた方は、ぜひ ZENRIN Maps APIリファレンスもご覧ください。
本記事が、みなさまの地図開発の一助となれば幸いです。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?