はじめに
地図上のマーカーに独自の画像を使用することで、ブランドイメージに合わせたデザインや、用途に応じた視覚的な区別が可能になります。
前回の記事「【10分でわかる】ZENRIN Maps APIを使って地図にマーカーを表示する（基本編） - Google 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の豊富な機能をご利用いただけます。
カスタムアイコンとは
カスタムアイコンは、デフォルトのマーカーピンではなく、独自の画像ファイル（PNG、JPGなど） を使用してマーカーを表示する機能です。本記事では、この画像ファイルを使ったカスタムアイコンの実装方法を解説します。
主な用途
- ブランディング: 企業ロゴやブランドカラーを反映
- 種類の区別: 店舗タイプ、物件種別などを視覚的に分類
- 状態の表示: 在庫状況、配送ステータスなどを色分け
- ユーザー体験の向上: より直感的で分かりやすい地図表示
ZENRIN Maps APIでのカスタムアイコン
ZENRIN Maps APIでは、customオプションを使用してカスタム画像を指定します。
// カスタムアイコンを使用したマーカーの作成
const customMarker = new ZDC.Marker(
new ZDC.LatLng(35.681406, 139.767132),
{
custom: {
base: {
imgSrc: './images/custom-pin.png', // 画像のパス
imgSize: new ZDC.Size(32, 32), // 画像のサイズ
imgPos: new ZDC.Point(16, -32) // アンカーポイント（下中央）
}
}
}
);
// マーカーを地図に追加
map.addWidget(customMarker);
カスタムアイコンのパラメータ
- imgSrc: 画像ファイルのパス（相対パスまたはURL）
- imgSize: 画像のサイズ（ZDC.Sizeオブジェクト）
-
imgPos: 画像の左上位置（ZDC.Pointオブジェクト）。画像の下中央を指定座標に合わせる場合は
new ZDC.Point(幅/2, -高さ)を指定
実装のポイント
- 画像サイズ: 一般的には20〜40ピクセル程度が使われる（用途に応じて調整可能）
- 画像形式: PNG形式が推奨（透過背景がサポートされる）
- パス指定: 相対パスまたは絶対URL
-
画像位置の調整:
imgPosで画像の表示位置を調整可能
Google Maps APIでのカスタムアイコン
Google Maps APIのAdvanced Markersでは、contentプロパティに画像要素を指定してカスタムアイコンを表示します。
// カスタムアイコンの作成
const customIcon = document.createElement('img');
customIcon.src = './images/custom-pin.png';
customIcon.style.width = '32px';
customIcon.style.height = '32px';
// カスタムアイコンを使用したマーカーの作成
const customMarker = new AdvancedMarkerElement({
map: map,
position: { lat: 35.681406, lng: 139.767132 },
content: customIcon,
title: 'カスタムマーカー'
});
補足: Web Componentsを使用する場合
HTMLで<gmp-map>要素（Web Components）を使用している場合は、コンストラクタのmapプロパティではなく、mapElement.append(marker)メソッドでマーカーを追加します。本記事ではJavaScriptで地図を作成する方法を紹介しているため、mapプロパティを使用しています。
実装のポイント
-
img要素の使用:
document.createElement('img')で画像要素を作成 -
サイズ制御: CSSの
width/heightで画像サイズを指定 -
content プロパティ: 作成した画像要素を
contentに渡す
カスタムアイコン機能の比較（画像ファイル使用時）
| 機能 | ZENRIN Maps API | Google Maps API |
|---|---|---|
| カスタム画像の指定方法 | custom.base (imgSrc/imgPos) | content プロパティにimg要素 |
| 対応画像形式 | 任意の画像形式 | 任意の画像形式 |
| サイズ制御 |
imgSizeで指定 |
CSSで制御 |
| アンカーポイント |
imgPosで指定 |
CSSで調整 |
| 実装の容易さ | シンプル（専用オプション） | やや複雑（DOM操作が必要） |
実装のポイント
ZENRIN Maps APIのカスタムアイコンの特徴
-
シンプルな構造:
custom.baseオプションで画像とポジションを指定 - 軽量な実装: 画像ファイルを直接参照するシンプルな方式
- 明確なAPI: パラメータが少なく、理解しやすい
- 日本向け最適化: 日本の地図データと相性が良い
Google Maps APIのカスタムアイコンの特徴
- img要素の活用: 標準的なDOM操作で画像マーカーを作成
- CSSによるサイズ制御: スタイルで柔軟にサイズを調整可能
- グローバル対応: 世界中の地図データで利用可能
- 拡張性: 画像だけでなく、PinElementやHTML要素への移行も可能
まとめ
本記事では、ZENRIN Maps APIとGoogle Maps APIを使用したカスタムアイコンの実装方法を比較しながら解説しました。
それぞれのAPIが適したユースケース
ZENRIN Maps APIのカスタムアイコンが特に適している場合
日本国内向けサービスで以下のような要件がある場合に最適です：
- シンプルなカスタマイズ: 画像ファイルを使った基本的なカスタマイズ
- 実装の容易さ: 少ないコードで実装したい
- 日本の地図データとの連携: 住所検索や建物情報と組み合わせる
- 実装パフォーマンス重視: 軽量な実装が求められる場合
推奨されるユースケース：
- 店舗検索サイトでの店舗種別の視覚化
- 不動産サイトでの物件タイプの区別
- 配送システムでのステータス表示
- 企業ブランドを反映したマーカー表示
Google Maps APIのカスタムアイコンが特に適している場合
グローバルサービスや以下のような要件がある場合に最適です：
- グローバル展開: 世界中の地図データが必要な場合
- Web標準技術の活用: DOM操作やCSSに慣れている開発チーム
- 段階的な拡張: 将来的により高度なカスタマイズへの移行を検討
推奨されるユースケース：
- グローバル展開するサービス
- 既存のWeb開発フローとの統合
- 将来的に画像マーカーからPinElementやHTML要素への拡張を予定しているプロジェクト
ZENRIN Maps API 2ヶ月無料お試しIDのご案内
本記事でご紹介したZENRIN Maps APIの機能を実際にお試しいただけます！
📝 お申し込みはこちら
👉 ZENRIN Maps APIの始め方
お試し期間中は、ZENRIN Maps APIの豊富な機能をご利用いただけるので、本格導入前の検証にぜひご活用ください。
関連記事
- 【10分でわかる】ZENRIN Maps APIを使って地図にマーカーを表示する（基本編） - Google Maps APIとの比較で理解する
- ZENRIN Maps APIとGoogle Maps APIのジオコーディング機能比較 - 初心者向け実装・活用ガイド
※本記事で使用しているAPIキーやURLはサンプルです。実際の導入時には、公式サイトから取得した正式なAPIキーを使用してください。