【10分でわかる】ZENRIN Maps APIを使って地図に吹き出し（Popup）を表示する - Google Maps APIとの比較で理解する

Last updated at 2026-03-11Posted at 2026-03-11

はじめに

地図上のマーカーをクリックしたとき、店舗名や住所などの詳細情報を吹き出しで表示する機能は、地図アプリで最もよく使われるUIパターンの一つです。

これまでの記事では、「【10分でわかる】ZENRIN Maps APIを使って地図にマーカーを表示する（基本編）」で基本的なマーカー表示方法を、「【10分でわかる】ZENRIN Maps APIを使って地図のクリックイベントを扱う」でクリックイベントの扱い方を解説しました。今回は、マーカーと組み合わせて使う 吹き出し（Popup / InfoWindow） の表示方法を解説します。

本記事では、ZENRIN Maps API ver2.0のZDC.Popupクラスと、Google Maps APIのInfoWindowクラスを、実際のコード例を通してわかりやすく比較します。

注記: 本記事では、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の豊富な機能をご利用いただけます。

吹き出し（Popup / InfoWindow）とは

吹き出しとは、地図上の特定の位置にテキストやHTMLコンテンツをポップアップ表示するUIコンポーネントです。マーカーと組み合わせることで、ユーザーがマーカーをクリックしたときに詳細情報を表示できます。

主な用途

店舗・施設情報の表示: 店舗名、住所、営業時間など
物件情報の表示: 価格、間取り、面積など
観光スポットの案内: スポット名、説明文、写真など

両APIでの呼び名

API	クラス名	概要
ZENRIN Maps API	`ZDC.Popup`	吹き出しのクラス。`map.addWidget()`で地図に追加
Google Maps API	`google.maps.InfoWindow`	情報ウィンドウのクラス。`open()`で地図に表示

ZDC.Popup クラスのリファレンス

ZENRIN Maps APIで吹き出しを表示するためのZDC.Popupクラスの仕様をまとめます。

コンストラクタ

new ZDC.Popup(latlng, options)

パラメータ	型	必須	説明
latlng	LatLng	○	表示位置の緯度経度。指定した緯度経度が吹き出しの下中央の位置になります
options	Object	-	オプション設定（デフォルト: `{}`）

options のプロパティ

プロパティ	型	デフォルト	説明
htmlSource	string	`''`	吹き出しに表示するHTMLソース
closeButton	boolean	`true`	閉じるボタンの表示/非表示。`true`: 表示、`false`: 非表示
offset	Point	`null`	吹き出し表示のオフセット値。x軸は右が正、y軸は下が正。例）`Point(100,100)`を指定した場合、右方向100、下方向100の位置に移動
class_name	string	`null`	吹き出しメイン部分のCSSクラス名
arrow_class_name	string	`null`	吹き出し矢印部分のCSSクラス名
size	Object	`null`	吹き出しの縦横サイズ指定（`h`: 縦ピクセル、`w`: 横ピクセル）
rotatedView	integer	`0`	表示回転角度。保持する座標値は変えずに、地図上の見栄えを図形のBBOXを中心に指定角度回転させます。左回りを正とします
propagation	boolean	`false`	イベントの地図伝搬フラグ。このウィジェット上で起きたイベントをMapにも伝搬させます。`true`: Mapのイベントが発生する、`false`: Mapのイベントが発生しない
movableOpen	boolean	`false`	`true`の時、`show()`メソッドを実行した際にポップアップが地図領域内に表示されるように地図をスクロールします

※ zIndex（重なり順）のデフォルト値はautoです。

メソッド

メソッド	戻り値	説明
getLatLng()	LatLng	表示位置を取得
setLatLng(latlng)	-	表示位置を設定
show()	-	吹き出しを表示
hide()	-	吹き出しを非表示
setZIndex(zIndex)	-	重なりの順序を設定。値が同一のウィジェットとの重なり順は保証されません。ウィジェットクラス間でのみ有効で、図形との重なり順序は保証されません
setOptions(options)	-	オプションを変更。コンストラクタの`options`と同じプロパティを指定可能
addEventListener(eventName, listener)	-	イベントリスナーを登録。マウス操作イベントとタッチ操作イベントに対応
removeEventListener(eventName, listener)	-	登録したイベントリスナーを削除
getId()	string	ウィジェットのIDを取得

基本的な吹き出しの表示

ZENRIN Maps APIの実装

// 吹き出しを作成
const popup = new ZDC.Popup(
    new ZDC.LatLng(35.681406, 139.767132),
    {
        htmlSource: '<b>東京駅</b><br>東京都千代田区丸の内1丁目'
    }
);

// 地図に吹き出しを追加
map.addWidget(popup);

Google Maps APIの実装

// ライブラリを読み込む
const { Map, InfoWindow } = await google.maps.importLibrary("maps");

// 吹き出しを作成
const infoWindow = new InfoWindow({
    content: '<b>東京駅</b><br>東京都千代田区丸の内1丁目',
    position: { lat: 35.681406, lng: 139.767132 }
});

// 吹き出しを地図上に表示
infoWindow.open({ map: map });

実装の違い

ZENRIN: map.addWidget(popup)で地図に追加すると、すぐに表示されます
Google: InfoWindowを作成した後、open()を呼び出さないと表示されません

マーカークリックで吹き出しを表示する

実際のアプリケーションでは、マーカーをクリックしたときに吹き出しを表示するのが一般的です。

ZENRIN Maps APIの実装

ZDC.Popupクラスと、ZDC.MarkerクラスのaddEventListener()を組み合わせて実装します。

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

// 吹き出しを作成
const popup = new ZDC.Popup(
    new ZDC.LatLng(35.681406, 139.767132),
    {
        htmlSource: '<b>東京駅</b><br>東京都千代田区丸の内1丁目'
    }
);

// 吹き出しを地図に追加（初期は非表示）
map.addWidget(popup);
popup.hide();

// マーカーのクリックイベントで吹き出しを表示
marker.addEventListener('click', function() {
    popup.show();
});

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

Google Maps APIの実装

InfoWindowのopen()メソッドにanchorとしてマーカーを渡すことで、マーカーの位置に吹き出しを表示します。

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

const position = { lat: 35.681406, lng: 139.767132 };

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

// 吹き出しを作成
const infoWindow = new InfoWindow({
    content: '<b>東京駅</b><br>東京都千代田区丸の内1丁目'
});

// マーカーのクリックイベントで吹き出しを表示
marker.addListener('click', () => {
    infoWindow.open({ map: map, anchor: marker });
});

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

複数マーカーで吹き出しを使い回す

複数のマーカーがある場合、吹き出しを1つだけ作成して使い回すパターンが一般的です。これにより、常に1つの吹き出しだけが表示され、メモリ効率も良くなります。

ZENRIN Maps APIの実装

setLatLng()で位置を更新し、setOptions()でコンテンツを変更します。

// 場所データ
const places = [
    { name: '東京駅', lat: 35.681406, lng: 139.767132, desc: '東京の玄関口' },
    { name: '新宿駅', lat: 35.689487, lng: 139.700931, desc: '日本一の乗降客数' },
    { name: '渋谷駅', lat: 35.658034, lng: 139.701636, desc: '若者の街の中心' }
];

// 吹き出しを1つ作成（使い回す）
const popup = new ZDC.Popup(
    new ZDC.LatLng(0, 0),
    { htmlSource: '' }
);
let isPopupAdded = false;

// 各マーカーにクリックイベントを設定
places.forEach(place => {
    const marker = new ZDC.Marker(
        new ZDC.LatLng(place.lat, place.lng)
    );

    marker.addEventListener('click', function() {
        // 吹き出しの位置と内容を更新
        popup.setLatLng(new ZDC.LatLng(place.lat, place.lng));
        popup.setOptions({
            htmlSource: `<b>${place.name}</b><br>${place.desc}`
        });

        // まだ地図に追加されていなければ追加
        if (!isPopupAdded) {
            map.addWidget(popup);
            isPopupAdded = true;
        }
        popup.show();
    });

    map.addWidget(marker);
});

Google Maps APIの実装

InfoWindowはopen()のみで表示を切り替えられるため、addWidget()や表示済みフラグのような管理は不要です。

// 場所データ
const places = [
    { name: '東京駅', lat: 35.681406, lng: 139.767132, desc: '東京の玄関口' },
    { name: '新宿駅', lat: 35.689487, lng: 139.700931, desc: '日本一の乗降客数' },
    { name: '渋谷駅', lat: 35.658034, lng: 139.701636, desc: '若者の街の中心' }
];

// 吹き出しを1つ作成（使い回す）
const infoWindow = new InfoWindow();

// 各マーカーにクリックイベントを設定
places.forEach(place => {
    const marker = new AdvancedMarkerElement({
        map: map,
        position: { lat: place.lat, lng: place.lng },
        title: place.name
    });

    marker.addListener('click', () => {
        infoWindow.setContent(`<b>${place.name}</b><br>${place.desc}`);
        infoWindow.open({ map: map, anchor: marker });
    });
});

吹き出し機能の比較

機能	ZENRIN Maps API	Google Maps API
クラス名	`ZDC.Popup`	`google.maps.InfoWindow`
コンテンツ指定	`htmlSource`（HTML文字列）	`content`（HTML文字列またはDOM要素）
表示	`map.addWidget(popup)`	`infoWindow.open({map, anchor})`
非表示	`popup.hide()` または閉じるボタン	`infoWindow.close()` または閉じるボタン、ESCキー
位置変更	`setLatLng(latlng)`	`setPosition(latLng)` または `open()` で再指定
内容変更	`setOptions({htmlSource: ...})`	`setContent(content)`
アンカー	手動で位置を合わせる	`open({anchor: marker})` で自動紐付け
自動パン	`movableOpen`で制御可能（デフォルトで無効）	`disableAutoPan`で制御可能（デフォルトで有効）

まとめ

本記事では、ZENRIN Maps APIのZDC.PopupとGoogle Maps APIのInfoWindowを使用した吹き出し表示の実装方法を比較しながら解説しました。

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

ZENRIN Maps APIの吹き出しが特に適している場合

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

シンプルな実装: HTML文字列を渡すだけで吹き出しを表示
日本の地図データとの連携: 住所検索や建物情報と組み合わせて詳細情報を表示
きめ細かな表示制御: show()/hide()で表示状態を自由に管理

推奨されるユースケース：不動産サイトの物件情報、店舗検索の詳細表示、配送システムの配達先情報など

Google Maps APIの吹き出しが特に適している場合

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

位置合わせが自動: open({map, anchor: marker})でマーカーに紐付けるだけで、吹き出しの位置を自動で調整してくれる
画面端でも読める: 自動スクロールで吹き出しが見切れる心配がない
キーボード操作に対応: ESCキーでも閉じられ、操作性がデフォルトで担保されている

推奨されるユースケース：グローバル展開するサービス、アクセシビリティ要件の高いアプリケーションなど

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

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

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

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【10分でわかる】ZENRIN Maps APIを使って地図に吹き出し（Popup）を表示する - Google Maps APIとの比較で理解する

はじめに

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

吹き出し（Popup / InfoWindow）とは

主な用途

両APIでの呼び名

ZDC.Popup クラスのリファレンス

コンストラクタ

options のプロパティ

メソッド

基本的な吹き出しの表示

ZENRIN Maps APIの実装

Google Maps APIの実装

実装の違い

マーカークリックで吹き出しを表示する

ZENRIN Maps APIの実装

Google Maps APIの実装

複数マーカーで吹き出しを使い回す

ZENRIN Maps APIの実装

Google Maps APIの実装

吹き出し機能の比較

まとめ

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

ZENRIN Maps APIの吹き出しが特に適している場合

Google Maps APIの吹き出しが特に適している場合

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

関連記事