【10分でわかる】ZENRIN Maps APIを使って地図にマーカーを表示する（HTMLアイコン編） - Google Maps APIとの比較で理解する

はじめに

地図上のマーカーにHTMLを使用することで、動的なコンテンツやインタラクティブな要素、リアルタイムで変化する情報を表示できるようになります。

これまでの記事では、「【10分でわかる】ZENRIN Maps APIを使って地図にマーカーを表示する（基本編）」で基本的なマーカー表示方法を、「【10分でわかる】ZENRIN Maps APIを使って地図にマーカーを表示する（カスタムアイコン編）」で画像ファイルを使ったカスタマイズ方法を解説しました。今回は、さらに発展的なHTML要素を使ったマーカー表示方法を解説します。

本記事では、ZENRIN Maps API ver2.0とGoogle Maps APIの両方でHTMLアイコンを設定する方法を、実際のコード例を通してわかりやすく比較します。

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

HTMLアイコンとは

HTMLアイコンは、HTML要素をマーカーとして使用する機能です。静的な画像ファイルとは異なり、CSSでスタイリングしたDOM要素や動的に生成されるコンテンツをマーカーとして表示できます。

画像アイコンとの違い

特徴	画像アイコン	HTMLアイコン
コンテンツ	静的な画像ファイル	動的なHTML/CSS
カスタマイズ性	画像の差し替えが必要	CSSで柔軟に変更可能
動的コンテンツ	不可	テキスト、数値、アニメーションが可能
インタラクション	限定的	ホバー効果、クリックイベントなど自由自在
パフォーマンス	画像の読み込みが必要	DOMレンダリングで表示

主な用途

• 数値表示: 店舗の価格表示、在庫数、評価スコアなど
• ステータス表示: リアルタイムの状態を色やアイコンで表現
• インタラクティブUI: ホバーで詳細表示、クリックでアクション
• アニメーション: 点滅、パルス効果などの視覚的演出
• カスタムデザイン: CSSで完全にカスタマイズされたマーカー

ZENRIN Maps APIでのHTMLアイコン

ZENRIN Maps APIでは、ZDC.UserWidgetクラスを使用してHTML要素をマーカーとして表示します。

// HTMLアイコンを作成（UserWidgetクラスを使用）
const htmlContent = `
    <div style="
        background-color: #e74c3c;
        color: white;
        padding: 8px 12px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 14px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        white-space: nowrap;
    ">
        ¥1,980
    </div>
`;

const htmlMarker = new ZDC.UserWidget(
    new ZDC.LatLng(35.681406, 139.767132),
    {
        htmlSource: htmlContent,        // HTMLソースコード
        offset: new ZDC.Point(-30, -20) // 表示位置のオフセット調整
    }
);

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

UserWidgetクラスのパラメータ

• latlng: 表示位置の緯度経度（ZDC.LatLngオブジェクト）
  • 指定した緯度経度がウィジェットの左上の位置になります
• options.htmlSource: HTMLのソースコード（文字列）
• options.offset: 表示位置のオフセット（ZDC.Pointオブジェクト）
  • x軸は右が正、y軸は下が正

実装のポイント

• HTMLソース: 文字列としてHTMLを渡す
• CSSスタイル: インラインスタイルまたは外部CSSクラスを使用可能
• 位置調整: offsetパラメータで表示位置を微調整
• サイズ: HTMLコンテンツのサイズに自動的に合わせる

Google Maps APIでのHTMLアイコン

Google Maps APIのAdvanced Markersでは、contentプロパティにDOM要素を渡してHTMLアイコンを表示します。

// ライブラリを読み込む
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 が必須
});

// HTMLアイコン用のDOM要素を作成
const htmlContent = document.createElement('div');
htmlContent.innerHTML = '¥1,980';
htmlContent.style.backgroundColor = '#e74c3c';
htmlContent.style.color = 'white';
htmlContent.style.padding = '8px 12px';
htmlContent.style.borderRadius = '20px';
htmlContent.style.fontWeight = 'bold';
htmlContent.style.fontSize = '14px';
htmlContent.style.boxShadow = '0 2px 6px rgba(0,0,0,0.3)';
htmlContent.style.whiteSpace = 'nowrap';

// HTMLアイコンを使用したマーカーの作成
const htmlMarker = new AdvancedMarkerElement({
    map: map,
    position: position,
    content: htmlContent,
    title: '価格表示マーカー'
});

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

実装のポイント

• DOM要素の作成: document.createElement()でHTML要素を作成
• スタイルの適用: JavaScriptでスタイルプロパティを設定
• content プロパティ: 作成したDOM要素をcontentに渡す
• 柔軟な構造: 複雑なHTML構造も作成可能

実践的なHTMLアイコンの例

店舗の価格表示マーカー

両APIで価格情報を表示するマーカーの実装例を紹介します。

ZENRIN Maps APIの実装

// 価格表示マーカーを作成する関数
function createPriceMarker(lat, lng, price, isDiscounted) {
    const bgColor = isDiscounted ? '#e74c3c' : '#3498db';
    const label = isDiscounted ? 'SALE' : '';

    const htmlContent = `
        <div style="
            position: relative;
            background-color: ${bgColor};
            color: white;
            padding: 8px 16px;
            border-radius: 24px;
            font-weight: bold;
            font-size: 14px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
            text-align: center;
            cursor: pointer;
        ">
            ${label ? `<span style="font-size: 10px; display: block;">${label}</span>` : ''}
            ¥${price.toLocaleString()}
        </div>
    `;

    return new ZDC.UserWidget(
        new ZDC.LatLng(lat, lng),
        {
            htmlSource: htmlContent,
            offset: new ZDC.Point(-40, -25)
        }
    );
}

// マーカーを追加
const marker1 = createPriceMarker(35.681406, 139.767132, 1980, false);
const marker2 = createPriceMarker(35.682500, 139.768000, 980, true);
map.addWidget(marker1);
map.addWidget(marker2);

Google Maps APIの実装

// 価格表示マーカーを作成する関数
function createPriceMarker(map, lat, lng, price, isDiscounted) {
    const bgColor = isDiscounted ? '#e74c3c' : '#3498db';
    const label = isDiscounted ? 'SALE' : '';

    const content = document.createElement('div');
    content.style.cssText = `
        position: relative;
        background-color: ${bgColor};
        color: white;
        padding: 8px 16px;
        border-radius: 24px;
        font-weight: bold;
        font-size: 14px;
        box-shadow: 0 3px 8px rgba(0,0,0,0.3);
        text-align: center;
        cursor: pointer;
    `;

    if (label) {
        const labelSpan = document.createElement('span');
        labelSpan.style.cssText = 'font-size: 10px; display: block;';
        labelSpan.textContent = label;
        content.appendChild(labelSpan);
    }

    const priceText = document.createTextNode(`¥${price.toLocaleString()}`);
    content.appendChild(priceText);

    return new AdvancedMarkerElement({
        map: map,
        position: { lat: lat, lng: lng },
        content: content
    });
}

// マーカーを追加
const marker1 = createPriceMarker(map, 35.681406, 139.767132, 1980, false);
const marker2 = createPriceMarker(map, 35.682500, 139.768000, 980, true);

HTMLアイコン機能の比較

機能	ZENRIN Maps API	Google Maps API
クラス/コンポーネント	ZDC.UserWidget	AdvancedMarkerElement
HTMLの指定方法	htmlSource（文字列）	content（DOM要素）
位置調整	offset（ZDC.Point）	anchorLeft/anchorTopまたはCSSで調整
実装方式	HTML文字列を渡す	DOM要素を作成して渡す
イベント処理	ウィジェットのイベントAPI	DOM標準イベント（addEventListener）
実装の容易さ	シンプル（文字列でOK）	やや複雑（DOM操作が必要）

実装のポイント

ZENRIN Maps APIのHTMLアイコンの特徴

• 文字列ベースの実装: HTMLソースを文字列として渡すシンプルな方式
• テンプレートリテラル活用: ES6のテンプレートリテラルで動的なHTML生成が容易
• オフセット調整: offsetパラメータで表示位置を細かく制御
• 軽量な実装: DOM操作が不要でコードがシンプル

Google Maps APIのHTMLアイコンの特徴

• DOM要素ベースの実装: JavaScript標準のDOM APIを使用
• スタイル制御: JavaScriptまたはCSSクラスでスタイリング
• イベント処理: DOM標準のイベントリスナーを直接設定可能
• フレームワーク統合: React、Vue.jsなどとの連携が容易

まとめ

本記事では、ZENRIN Maps APIとGoogle Maps APIを使用したHTMLアイコンの実装方法を比較しながら解説しました。

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

ZENRIN Maps APIのHTMLアイコンが特に適している場合

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

• シンプルな実装: HTMLを文字列として渡すだけで完了
• 動的コンテンツ表示: 価格、在庫数、ステータスなどをリアルタイム表示
• 日本の地図データとの連携: 住所検索や建物情報と組み合わせる
• テンプレートベースの開発: HTMLテンプレートを活用した効率的な開発

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

• ECサイトや価格比較サービスでの価格マーカー
• 在庫管理システムでの数量表示
• 配送システムでのリアルタイムステータス表示
• 不動産サイトでの物件価格・条件表示

Google Maps APIのHTMLアイコンが特に適している場合

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

• DOM操作ベースの開発: JavaScriptでの細かな制御が必要
• フレームワーク統合: React、Vue.jsなどとの連携
• 複雑なインタラクション: 高度なイベント処理が必要
• 既存のWeb開発フロー: DOM操作に慣れた開発チーム

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

• グローバル展開するサービス
• SPAフレームワークを使用したアプリケーション
• 複雑なUIインタラクションを持つ地図アプリ
• 既存のDOMベースのコンポーネントライブラリとの統合

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

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

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

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

関連記事

• 【10分でわかる】ZENRIN Maps APIを使って地図にマーカーを表示する（基本編） - Google Maps APIとの比較で理解する
• 【10分でわかる】ZENRIN Maps APIを使って地図にマーカーを表示する（カスタムアイコン編） - Google Maps APIとの比較で理解する
• 【10分でわかる】ZENRIN Maps APIで始める地図表示 - Google Maps APIとの比較で理解する
• ZENRIN Maps APIとGoogle Maps APIのジオコーディング機能比較 - 初心者向け実装・活用ガイド

---

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