Go to Qiita Advent Calendar Top
LoginSignup
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との比較で理解する

Last updated at Posted at 2025-11-23

はじめに

地図上に目印となるピンやアイコンを表示する「マーカー機能」は、店舗案内、物件検索、配送管理など、あらゆる地図アプリケーションで必要不可欠な機能です。

本記事では、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で最もシンプルなマーカーを表示する方法を見ていきましょう。東京駅（緯度35.681406, 経度139.767132）にマーカーを配置します。

1. ZENRIN Maps APIでの実装

ZENRIN Maps APIでは、ZDC.Markerクラスを使用してマーカーを作成し、map.addWidget()メソッドで地図に追加します。

<!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.setOnLoad(function(mapOptions, error) {
            if (error) {
                console.error('地図の読み込みに失敗しました:', error);
                return;
            }

            const mapElement = document.getElementById('ZMap');

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

            // 地図の設定
            mapOptions.center = new ZDC.LatLng(lat, lng);
            mapOptions.zoom = 17;

            // 地図を作成
            const map = new ZDC.Map(
                mapElement,
                mapOptions,
                () => {
                    console.log('地図の初期化が完了しました');

                    // マーカーを作成
                    const marker = new ZDC.Marker(
                        new ZDC.LatLng(lat, lng)  // マーカーの位置
                    );

                    // マーカーを地図に追加
                    map.addWidget(marker);
                },
                () => {
                    console.error('地図の初期化に失敗しました');
                }
            );
        });
    </script>
</body>
</html>

重要なポイント

マーカーの作成:

const marker = new ZDC.Marker(
    new ZDC.LatLng(緯度, 経度)
);

マーカーを地図に追加:

map.addWidget(marker);

2. Google Maps APIでの実装

Google Maps APIでは、最新のAdvancedMarkerElementクラスを使用します。

<!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() {
            // ライブラリを読み込む
            const { Map } = await google.maps.importLibrary("maps");
            const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

            // 東京駅の緯度経度
            const position = { lat: 35.681406, lng: 139.767132 };

            // 地図を作成（mapIdが必要）
            const map = new Map(document.getElementById('map'), {
                center: position,
                zoom: 17,
                mapId: 'DEMO_MAP_ID'  // Advanced Markersには mapId が必須
            });

            // マーカーを作成（自動的に地図に追加される）
            const marker = new AdvancedMarkerElement({
                map: map,
                position: position,
                title: '東京駅'
            });

            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",
          v: "weekly"
        });

        initMap();
    </script>
</body>
</html>

重要なポイント

markerライブラリの読み込み:

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

マーカーの作成と地図への設置:

const marker = new AdvancedMarkerElement({
    map: map,           // 地図オブジェクト
    position: position, // マーカーの位置
    title: 'タイトル'    // ツールチップのタイトル（オプション）
});

mapIdの指定が必須:
Advanced Markersを使用する場合、地図作成時にmapIdの指定が必須です。

const map = new Map(document.getElementById('map'), {
    mapId: 'DEMO_MAP_ID'  // テスト用の mapId（本番環境では Google Cloud Console で作成）
});

ZENRIN Maps APIとGoogle Maps APIのマーカー機能比較

機能 ZENRIN Maps API Google Maps API
基本的なマーカー表示 ZDC.Marker AdvancedMarkerElement
マーカーの追加方法 map.addWidget(marker) コンストラクタでmapを指定
座標の指定方法 new ZDC.LatLng(lat, lng) { lat: xx, lng: yy }
必須パラメータ 位置のみ map と position が必須
マーカーの削除 map.removeWidget(marker) marker.map = null

実装のポイント

ZENRIN Maps APIのマーカー実装の特徴

  • シンプルな API 設計: マーカーの作成と追加が明確に分離（new ZDC.Marker → map.addWidget）
  • Widget として統一された管理: 他の地図要素と同じ方法で管理できます
  • 日本特化の地図データとの親和性: 住所検索や建物情報との連携が容易

Google Maps APIのマーカー実装の特徴

  • Advanced Markersの採用: 最新のAdvanced Markersは高性能でカスタマイズ性に優れています
  • グローバルな地図データ: 世界中の位置情報に対応
  • 豊富なエコシステム: Places APIやDirections APIとのシームレスな連携

まとめ

本記事では、ZENRIN Maps APIとGoogle Maps APIを使用した基本的なマーカー表示の実装方法を比較しながら解説しました。

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

ZENRIN Maps APIのマーカー機能が特に適している場合

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

  • シンプルで理解しやすいAPI: 作成と追加が明確に分離された設計
  • デフォルトアイコンのバリエーション: 色や番号を簡単に設定可能
  • 日本特化の地図データとの連携: 建物名や住所情報との組み合わせ
  • 統一されたWidget管理: 他の地図要素と同じ方法で扱える

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

  • 店舗検索や不動産サイトでの物件表示
  • 配送・物流システムでの配送先マーカー表示
  • 地域密着型サービスでのイベント会場案内
  • 日本国内のエンタープライズ向けシステム

Google Maps APIのマーカー機能が特に適している場合

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

  • 豊富な周辺機能: Places APIやDirections APIとのシームレスな連携
  • 最新技術の採用: Advanced Markersによる高性能な表示
  • 世界規模での利用: グローバルな地図データとの統合
  • エコシステムの充実: Street Viewやルート検索との統合

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

  • 観光アプリやグローバルサービス
  • Street Viewなどとの連携が必要な場合
  • 世界中の位置情報を扱うアプリケーション
  • 既存のGoogle製品との統合が必要な場合

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?