【10分でわかる】ZENRIN Maps APIで始める地図表示 - Google Maps APIとの比較で理解する

Last updated at 2025-10-23Posted at 2025-10-23

はじめに

「Webサイトに地図を表示したい」「ユーザーが見やすい地図機能を実装したい」——Webアプリケーション開発で地図を表示することは、今や一般的な要件となっています。

日本国内向けのWebサービスやアプリケーションを開発する場合、住宅地図レベルの高精度な地図データを提供するZENRIN Maps APIは、強力な選択肢となります。

この記事では、10分で理解できるよう、ZENRIN Maps APIの基本的な地図表示方法を実際のコード例とともにわかりやすく解説します。また、理解を深めるためにGoogle Maps APIとの比較も行います。

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

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

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

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

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

ZENRIN Maps APIとは

ZENRIN Maps APIの特徴

提供元: ゼンリングループ
特徴: 日本国内の詳細な地図データに特化した地図API
強み:
- 住宅地図レベルの精密な日本の地図情報
- 建物名・テナント情報などの詳細データ
- 時空間データベースによる過去地図対応
- 日本の住所体系に完全対応
開発言語: JavaScript（Web）
認証方式: IP制限/リファラ制限/OAuth2.0から選択可能

Google Maps APIの特徴

Google Maps APIは世界的に広く利用されている地図APIです：

提供元: Google
特徴: 世界中の地図データをカバー
強み:
- グローバル規模での広範なカバレッジ
- Street View、Places、Directions APIなど豊富な関連サービス
- 活発なコミュニティと豊富な実装事例
- 継続的なアップデートと新機能の追加
- 多言語対応とグローバルな地名データベース
開発言語: JavaScript（Web）
認証方式: APIキー + アプリケーション制限（HTTPリファラー/IPアドレス/Android/iOSアプリ）

本記事では、これら2つの優れた地図APIの実装方法を比較することで、それぞれの特徴と適したユースケースを理解していきます。

基本的な地図表示の実装

ZENRIN Maps APIで最もシンプルな地図を表示する方法を見ていきましょう。比較のために、Google Maps APIでの実装方法も紹介します。どちらも東京駅（緯度35.681406, 経度139.767132）を中心とした地図を表示します。

1. ZENRIN Maps APIでの実装

ZENRIN Maps APIでは、ZMALoaderを使用して地図ライブラリを読み込み、ZDC.Mapクラスで地図を表示します。

注意: ZENRIN Maps APIの利用には、契約時に発行されるAPIキーと、選択した認証方式の設定が必要です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ZENRIN Maps API - 基本的な地図表示</title>
    <style>
        /* 地図を表示する領域のサイズを指定 */
        #ZMap {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <h1>ZENRIN Maps API - 地図表示サンプル</h1>
    <div id="ZMap"></div>

    <!-- ZENRIN Maps API ローダーの読み込み -->
    <script src="https://js.zmaps-api.com/zma_loader.js?key=[YOUR_API_KEY]&auth=[AUTH_TYPE]"></script>
    <script>
        // ZMALoaderで地図を初期化
        ZMALoader.setOnLoad(function(mapOptions, error) {
            // エラーチェック
            if (error) {
                console.error('地図の読み込みに失敗しました:', error);
                return;
            }

            // 地図を表示するHTML要素を取得
            const mapElement = document.getElementById('ZMap');

            // 東京駅の緯度経度
            const lat = 35.681406;
            const lng = 139.767132;

            // MapOptionsをカスタマイズ（必要に応じて）
            // デフォルトで以下が設定されています:
            // minzoom: 10, movable: true, zoomable: true,
            // keyboardOperation: true, mouseOperation: true,
            // touchOperation: true, centerZoom: true

            // 中心点の緯度経度を設定
            mapOptions.center = new ZDC.LatLng(lat, lng);
            mapOptions.zoom = 17;  // ズームレベルを設定

            // 地図オブジェクトを作成
            const map = new ZDC.Map(
                mapElement,
                mapOptions,
                () => {
                    // 地図の初期化が成功した時の処理
                    console.log('地図の初期化が完了しました');
                },
                () => {
                    // 地図の初期化が失敗した時の処理
                    console.error('地図の初期化に失敗しました');
                }
            );
        });
    </script>
</body>
</html>

重要なパラメータ

ローダースクリプトのURL:

https://js.zmaps-api.com/zma_loader.js?key=[YOUR_API_KEY]&auth=[AUTH_TYPE]

URLパラメータ:

key: APIキー（契約時に提供されます）
auth: 認証方式を指定
- ip - 接続元IPアドレス制限
- referer - 接続元リファラ制限
- Bearer[トークン文字列] - OAuth2.0認証

MapOptions（デフォルト値）:
ZMALoader が自動的に以下の初期値を設定します：

minzoom: 10 - 最小ズームレベル
movable: true - 地図の移動可否
zoomable: true - ズーム操作の可否
keyboardOperation: true - キーボード操作の可否
mouseOperation: true - マウス操作の可否
touchOperation: true - タッチ操作の可否
centerZoom: true - 中心固定ズームの可否

主要なカスタマイズ項目（例）:

MapOptionsのパラメータは、上記のデフォルト値を含めてすべてカスタマイズ可能です。以下は基本的な地図表示で頻繁に使用される設定例です：

center: 地図の中心位置（new ZDC.LatLng(緯度, 経度)）
zoom: ズームレベル（数値）
zipsMapType: 地図タイプ（ご契約時に発行された値を指定します）

2. Google Maps APIでの実装

続いて、Google Maps APIでの実装方法を見ていきましょう。最新のimportLibrary方式を使用します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Google Maps API - 基本的な地図表示</title>
    <style>
        /* 地図を表示する領域のサイズを指定 */
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <h1>Google Maps API - 地図表示サンプル</h1>
    <div id="map"></div>

    <script>
        // 地図を表示する関数（非同期）
        async function initMap() {
            // Maps JavaScript APIのライブラリを読み込む
            const { Map } = await google.maps.importLibrary("maps");

            // 地図のオプションを設定
            const mapOptions = {
                center: { lat: 35.681406, lng: 139.767132 }, // 東京駅の緯度経度
                zoom: 17,  // ズームレベル
            };

            // 地図オブジェクトを作成
            const map = new Map(
                document.getElementById('map'),
                mapOptions
            );

            console.log('地図の初期化が完了しました');
        }

        // Google Maps API JavaScript ライブラリの読み込み（非同期）
        (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
          key: "YOUR_API_KEY", // あなたのGoogle Maps API Key
          v: "weekly"
        });

        // 地図を初期化
        initMap();
    </script>
</body>
</html>

重要なパラメータ

key: Google Maps APIキー（Google Cloud Consoleで取得）
- Google Cloud Consoleで、APIキーに対してアプリケーション制限（HTTPリファラー、IPアドレス、Android/iOSアプリ）を設定可能
center: 地図の中心位置（{ lat: 緯度, lng: 経度 }）
zoom: ズームレベル

ライブラリの読み込み: 最新のGoogle Maps APIでは、importLibraryを使用した動的読み込みが推奨されています

ZENRIN Maps APIとGoogle Maps APIの機能比較

以下の表は、両APIの実装における特徴の違いを比較したものです。

機能	ZENRIN Maps API	Google Maps API
基本的な地図表示	対応	対応
パン操作	対応（ドラッグ可能）	対応（ドラッグ可能）
地図タイプ	通常地図/過去地図/住宅地図	通常/衛星/地形/ハイブリッド
日本の詳細度	非常に高い（住宅地図レベル）	高い（標準的な詳細度）
グローバル対応	日本特化	全世界対応
認証方式	IP制限/リファラ制限/OAuth2.0	APIキー + アプリケーション制限（リファラ/IP/Android/iOS）
ライブラリ読み込み	ZMALoader（zma_loader.js）	importLibrary（動的読み込み）
必須パラメータ	APIキー、認証タイプ	APIキー
座標指定方法	new ZDC.LatLng(lat, lng)	{ lat: xx, lng: yy }
日本語ドキュメント	充実	充実

実装のポイント

ZENRIN Maps APIの実装の特徴

1. ZMALoaderによるライブラリ読み込み

ZENRIN Maps APIでは、ZMALoaderを使用してライブラリを読み込みます。認証情報はローダーのURLパラメータとして指定します。

<!-- ZMALoaderの読み込み -->
<script src="https://js.zmaps-api.com/zma_loader.js?key=[YOUR_API_KEY]&auth=[AUTH_TYPE]"></script>

URLパラメータ:

key: APIキー（契約時に提供されます）
auth: 認証方式（ip、referer、Bearer[token]のいずれか）

2. ZMALoader.setOnLoadコールバック

ZMALoaderは、地図ライブラリの読み込みが完了すると、自動的にMapOptionsを生成してコールバック関数に渡します。

ZMALoader.setOnLoad(function(mapOptions, error) {
    if (error) {
        console.error('地図の読み込みに失敗しました:', error);
        return;
    }

    // MapOptionsはZMALoaderによって自動生成されており、
    // デフォルト値が設定されています
    mapOptions.center = new ZDC.LatLng(35.681406, 139.767132);
    mapOptions.zoom = 17;

    // 地図を作成
    const map = new ZDC.Map(mapElement, mapOptions, successCallback, errorCallback);
});

3. 地図初期化のコールバック方式

ZDC.Mapコンストラクタでは、成功・失敗を明示的に処理できるコールバックを指定します。

const map = new ZDC.Map(
    mapElement,
    mapOptions,
    () => {
        // 成功時の処理
        console.log('地図初期化成功');
    },
    () => {
        // 失敗時の処理
        console.error('地図初期化失敗');
    }
);

4. 日本特化の地図タイプ

住宅地図や過去地図など、日本国内に特化した地図タイプが利用可能です。

Google Maps APIの実装の特徴

1. APIキーベースの認証

APIキーを指定してライブラリを読み込みます。Google Cloud Consoleで、APIキーに対してアプリケーション制限（HTTPリファラー、IPアドレス、Android/iOSアプリ）を設定できます。

// ライブラリ読み込み時にAPIキーを指定
{
    key: "YOUR_API_KEY",  // Google Cloud Consoleで取得したAPIキー
    v: "weekly"
}

セキュリティのベストプラクティス: 本番環境では、必ずGoogle Cloud ConsoleでAPIキーにアプリケーション制限を設定し、不正利用を防止してください。

2. 非同期読み込み（importLibrary）

最新のGoogle Maps APIでは、必要なライブラリを動的に読み込む方式が推奨されています。

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

まとめ

本記事では、ZENRIN Maps APIによる基本的な地図表示の実装方法を、Google Maps APIとの比較を交えながら解説しました。

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

両APIはそれぞれ異なる強みを持っており、プロジェクトの要件に応じて適切に選択することが重要です。

ZENRIN Maps APIが特に適している場合

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

住宅地図レベルの高精度データ: 建物名・テナント情報まで網羅
日本の住所体系に完全対応: 日本独自の住所表記を正確に処理
時空間データベース: 過去地図による歴史的データの参照が可能
柔軟な認証方式: IP制限、リファラ制限、OAuth2.0から選択可能
エンタープライズサポート: 契約ベースでの安定した運用と手厚いサポート

推奨されるユースケース：

店舗検索、不動産、地域密着型サービス
ECサイト、物流、配送システムでの高精度な位置情報管理
建物名・テナント情報の詳細表示が必要なサービス
過去地図による歴史的データとの照合や時系列変化の可視化
日本国内での長期的・エンタープライズ利用

Google Maps APIが特に適している場合

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

世界規模のカバレッジ: 多言語対応と世界中の詳細な地図データ
Googleエコシステムとの統合: Street View、Places、Directionsなどとのシームレスな連携
豊富な関連サービス: ルート検索、リアルタイム交通情報、周辺施設検索など
活発なコミュニティ: 世界中の開発者による豊富な情報とサンプルコード
継続的なイノベーション: 定期的な新機能追加と技術アップデート

推奨されるユースケース：

国境を越えたグローバルサービスやアプリケーション
観光案内や旅行サービスなど、世界中の地図情報が必要な場合
Street Viewなど、Googleの特徴的な機能を活用したい場合
多言語対応が必須のサービス
世界中のユーザーをターゲットとするサービス

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

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

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

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

ZENRIN Maps APIとGoogle 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で始める地図表示 - Google Maps APIとの比較で理解する

はじめに

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

ZENRIN Maps APIとは

ZENRIN Maps APIの特徴

Google Maps APIの特徴

基本的な地図表示の実装

1. ZENRIN Maps APIでの実装

重要なパラメータ

2. Google Maps APIでの実装

重要なパラメータ

ZENRIN Maps APIとGoogle Maps APIの機能比較

実装のポイント

ZENRIN Maps APIの実装の特徴

1. ZMALoaderによるライブラリ読み込み

2. ZMALoader.setOnLoadコールバック

3. 地図初期化のコールバック方式

4. 日本特化の地図タイプ

Google Maps APIの実装の特徴

1. APIキーベースの認証

2. 非同期読み込み（importLibrary）

まとめ

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

ZENRIN Maps APIが特に適している場合

Google Maps APIが特に適している場合

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

関連記事