対象範囲

この記事では、ロケーター＆ページ製品でロケーションのピンをカスタマイズするためのオプションについて説明します。ピンの色とロゴ、クラスターの色とロゴが含まれます。

すべてのピンをカスタマイズする

ピンの色

ロケーターの基本ピンの色は、data-locationpincolor 属性で別の色に変更できます。この属性には、RGB 値、HEX コード、色の名前の 3 種類の色の値を指定できます。

data-locationpincolor = "RGB(255,0,0)"
data-locationpincolor = "#F50000"
data-locationpincolor = "red"

ホバー時のピンの色

ホバー時のロケーターの基本ピンの色は、data-locationpinhovercolor 属性で別の色に変更できます。この属性には、RGB 値、HEX コード、色の名前の 3 種類の色の値を指定できます。

data-locationpinhovercolor = "RGB(0,255,0)"
data-locationpinhovercolor = "#00FF00"
data-locationpinhovercolor = "green"

ピンのロゴ

デフォルトのピンのロゴは、data-locationpinurl 属性で変更できます。この属性には、ピンとして使用したい画像の直接 URL を指定します。ロケーターで正しく表示するには、ロゴを .png または .jpg ファイルにする必要があります。

data-locationpinurl = "https://s3.eu-central-1.amazonaws.com/uberall-downloads-prod/uberall_logo2.jpg"

ホバー時のピンのロゴ

ホバー時にピンを別のロゴに変更するには、data-locationpinhoverurl 属性を使用します。この属性には、ピンとして使用したい画像の直接 URL を指定します。ロケーターで正しく表示するには、ロゴを .png または .jpg ファイルにする必要があります。

data-locationpinhoverurl = "https://cdn.join.com/5d4915171a5a1000068c03c7/uberall-gmb-h-logo-xl.png"

ビジネス単位でピンのロゴをカスタマイズする

上記のピンのロゴ設定は、ロケーターのすべてのロケーションにカスタムピンを適用します。以下の方法では、単一のビジネス（アカウント）のすべてのピンに、ロゴ付きのカスタムピンを設定できます。同じロケーター内に複数のビジネスやブランドがあり、ピンで簡単に区別したい場合に便利です。これは data-locationpinurl-business 属性で実現できます。カスタムピンのロゴと関連付けるには、ビジネス ID（アカウント ID）を指定する必要があります。ビジネス ID は、Uberall プラットフォームでアカウントを表示したときの URL で確認できます。ビジネスごとに異なるピンのロゴを使用する場合は、フォールバック用のロゴを定義できます。

data-locationpinurl = "https://s3.eu-central-1.amazonaws.com/uberall-downloads-prod/uberall_logo2.jpg"
data-locationpinurl-business = "337141=https://cdn.join.com/5d4915171a5a1000068c03c7/uberall-gmb-h-logo-xl.png"

data-locationpinurl-business="337141=https://cdn.iconscout.com/icon/premium/png-256-thumb/donut-1410601-1193527.png,
77215=https://www.top5reviewed.com/wp-content/uploads/2016/01/Donut-Cushions.png,
337143=https://cdn.iconscout.com/icon/premium/png-256-thumb/donut-174-878224.png"

ロゴの白い背景を削除する

カスタムピンとして使用するロゴの背景が透明な場合、ロケーター上でも透明にしたいことがあります。デフォルトでは、ピンには白い背景が表示されます。このデフォルトの背景色を変更するには、CSS を使用する必要があります。

#store-finder-widget .custom-pin-default{
   background: none !important
   }


 #store-finder-widget .custom-pin-highlighted{
   background: none !important
   }