2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@aprme

【10分でわかる】ZENRIN Maps APIを使って地図のクリックイベントを扱う - Google Maps APIとの比較で理解する

2
Last updated at Posted at 2026-02-18

はじめに

地図をクリックして緯度経度を取得したり、マーカーをクリックして詳細情報を表示したりする「クリックイベント」は、地図アプリの基本中の基本です。

これまでの記事では、「【10分でわかる】ZENRIN Maps APIで始める地図表示」で地図の表示方法を、「【10分でわかる】ZENRIN Maps APIを使って地図にマーカーを表示する（基本編）」でマーカーの表示方法を解説しました。今回は、地図やマーカーに対するクリックイベントの処理方法を解説します。

本記事では、ZENRIN Maps API ver2.0とGoogle Maps APIの両方でクリックイベントを扱う方法を、実際のコード例を通してわかりやすく比較します。

注記: 本記事では、ZENRIN Maps APIのバージョン2.0と、Google Maps APIのAdvanced Markersを使用します。

ZENRIN Maps API 2ヶ月無料お試しID

ZENRIN Maps APIを実際に試してみたい方は、2ヶ月無料のお試しIDをご利用いただけます！

📝 お申し込みはこちら
👉 ZENRIN Maps APIの始め方

お試し期間中は、本記事で紹介する機能をはじめ、ZENRIN Maps APIの豊富な機能をご利用いただけます。

クリックイベントとは

クリックイベントとは、ユーザーが地図やマーカーなどの要素をクリック（またはタップ）したときに発生するイベントです。イベントリスナーを登録することで、クリック時に任意の処理を実行できます。

主な用途

  • 緯度経度の取得: クリックした地点の座標を取得
  • マーカー操作: マーカークリックで情報表示やアクション実行
  • 地図上への要素追加: クリックした位置にマーカーやポップアップを配置

両APIでのイベント登録方法

API メソッド 概要
ZENRIN Maps API addEventListener(eventName, listener) Map・ウィジェット共通のイベント登録メソッド
Google Maps API addListener(eventName, handler) Map・マーカー共通のイベント登録メソッド

ZENRIN Maps API のクリック系イベント リファレンス

ZENRIN Maps APIで利用できるクリック系イベントをまとめます。

イベント名 発火タイミング イベントオブジェクトのプロパティ
click 地図をクリック（タップ）した時 type, latlng(LatLng), point(Point), button(number)
dblclick 地図をダブルクリックした時 type, latlng(LatLng), point(Point), button(number)
rightclick 地図を右クリックした時 type, latlng(LatLng), point(Point)
longtouch 地図上で指を長押しした時 type, latlng(LatLng), point(Point), target(object)

※ clickイベントはスマートフォンのタップ操作にも対応しています。
※ ウィジェット（Marker、Popup等）でもクリック系イベントを利用できます。
※ 上記以外にもmousemove、touchstartなど多数のイベントが用意されています。詳細は公式ドキュメント（Map Events）を参照してください。

地図のクリックで緯度経度を取得する

最も基本的なクリックイベントの使い方として、クリックした地点の緯度経度を取得する例を紹介します。

ZENRIN Maps APIの実装

// 地図のクリックイベントを登録
map.addEventListener('click', function(event) {
    const lat = event.latlng.lat;
    const lng = event.latlng.lng;
    console.log(`緯度: ${lat}, 経度: ${lng}`);
});

Google Maps APIの実装

// 地図のクリックイベントを登録
map.addListener('click', (event) => {
    const lat = event.latLng.lat();
    const lng = event.latLng.lng();
    console.log(`緯度: ${lat}, 経度: ${lng}`);
});

実装の違い

  • ZENRIN: イベントオブジェクトのlatlngプロパティから緯度経度を取得。event.latlng.latのようにプロパティとしてアクセス
  • Google: イベントオブジェクトのlatLngプロパティから緯度経度を取得。event.latLng.lat()のようにメソッドとして呼び出し

マーカーのクリックイベント

マーカーをクリックしたときにアラートを表示する基本的な例です。

ZENRIN Maps APIの実装

// マーカーを作成
const marker = new ZDC.Marker(
    new ZDC.LatLng(35.681406, 139.767132)
);

// マーカーのクリックイベントを登録
marker.addEventListener('click', function(event) {
    alert('東京駅がクリックされました');
});

// マーカーを地図に追加
map.addWidget(marker);

Google Maps APIの実装

const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// マーカーを作成
const marker = new AdvancedMarkerElement({
    map: map,
    position: { lat: 35.681406, lng: 139.767132 },
    title: '東京駅'
});

// マーカーのクリックイベントを登録
marker.addListener('click', () => {
    alert('東京駅がクリックされました');
});

実装の違い

  • ZENRIN: addEventListener()でイベントを登録。マーカーをmap.addWidget()で地図に追加
  • Google: addListener()でイベントを登録。マーカーはコンストラクタのmapプロパティで地図に追加済み

補足: Web Componentsを使用する場合
HTMLで<gmp-map>要素（Web Components）を使用している場合は、コンストラクタのmapプロパティではなく、mapElement.append(marker)メソッドでマーカーを追加します。本記事ではJavaScriptで地図を作成する方法を紹介しているため、mapプロパティを使用しています。

補足: gmp-clickイベントについて
AdvancedMarkerElementでは、本記事で使用しているaddListener('click', ...)に加えて、Web標準のaddEventListener()を使う方法もあります。ただし、addEventListener()を使用する場合は'click'ではなく'gmp-click'イベントを指定する必要があります。

クリックした位置にマーカーを追加する

地図をクリックするたびに、その位置にマーカーを追加する実践的な例です。

ZENRIN Maps APIの実装

// 地図のクリックイベントを登録
map.addEventListener('click', function(event) {
    // クリック位置にマーカーを作成
    const marker = new ZDC.Marker(
        new ZDC.LatLng(event.latlng.lat, event.latlng.lng)
    );

    // マーカーを地図に追加
    map.addWidget(marker);
});

Google Maps APIの実装

// 地図のクリックイベントを登録
map.addListener('click', (event) => {
    // クリック位置にマーカーを作成
    const marker = new AdvancedMarkerElement({
        map: map,
        position: event.latLng
    });
});

イベントリスナーの削除

登録したイベントリスナーを削除する方法です。

ZENRIN Maps APIの実装

// リスナー関数を変数に保持
const clickHandler = function(event) {
    console.log(`緯度: ${event.latlng.lat}, 経度: ${event.latlng.lng}`);
};

// イベントリスナーを登録
map.addEventListener('click', clickHandler);

// イベントリスナーを削除
map.removeEventListener('click', clickHandler);

Google Maps APIの実装

// イベントリスナーを登録（リスナーオブジェクトが返される）
const listener = map.addListener('click', (event) => {
    console.log(`緯度: ${event.latLng.lat()}, 経度: ${event.latLng.lng()}`);
});

// イベントリスナーを削除
google.maps.event.removeListener(listener);

実装の違い

  • ZENRIN: 登録時と同じ関数の参照をremoveEventListener()に渡して削除
  • Google: addListener()の戻り値（リスナーオブジェクト）をgoogle.maps.event.removeListener()に渡して削除

クリックイベント機能の比較

機能 ZENRIN Maps API Google Maps API
イベント登録 addEventListener(eventName, listener) addListener(eventName, handler)
イベント削除 removeEventListener(eventName, listener) google.maps.event.removeListener(listener)
緯度経度の取得 event.latlng.lat
event.latlng.lng 		event.latLng.lat()
event.latLng.lng()
マーカーイベント marker.addEventListener() marker.addListener()
ウィジェット対応 マウス・タッチ操作イベントのみ イベントタイプにより異なる
タッチ操作 クリックイベントがタッチにも対応。
加えてtouchstart/touchmove/touchend/longtouchも利用可		 クリックイベントがタッチにも対応

まとめ

本記事では、ZENRIN Maps APIとGoogle Maps APIを使用したクリックイベントの処理方法を比較しながら解説しました。

それぞれのAPIが適したユースケース

ZENRIN Maps APIのクリックイベントが特に適している場合

日本国内向けサービスで以下のような要件がある場合に最適です：

  • 統一されたイベントAPI: Map・ウィジェットともにaddEventListener()で一貫した実装
  • 詳細なイベント情報: 緯度経度と画面座標の両方をイベントオブジェクトから取得可能
  • タッチ操作特化のイベント: クリックイベントのほか、longtouchなど、タッチ操作に特化したイベントで細かな制御が可能

推奨されるユースケース：地点登録システム、不動産の物件マーキング、配送ルートの地点指定など

Google Maps APIのクリックイベントが特に適している場合

グローバルサービスや以下のような要件がある場合に最適です：

  • シンプルなリスナー管理: リスナーオブジェクトによる直感的な削除操作
  • タッチの自動対応: クリックイベントがPC・スマートフォン両方に自動対応
  • 豊富なイベントタイプ: dragend、bounds_changedなど地図操作に関する多彩なイベント

推奨されるユースケース：グローバル展開するサービス、クロスプラットフォームアプリケーションなど

ZENRIN Maps API 2ヶ月無料お試しIDのご案内

本記事でご紹介したZENRIN Maps APIの機能を実際にお試しいただけます！

📝 お申し込みはこちら
👉 ZENRIN Maps APIの始め方

お試し期間中は、ZENRIN Maps APIの豊富な機能をご利用いただけるので、本格導入前の検証にぜひご活用ください。

関連記事

※本記事で使用しているAPIキーやURLはサンプルです。実際の導入時には、公式サイトから取得した正式なAPIキーを使用してください。

2
2
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
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?