プレイス アイコン

プラットフォームを選択: Android iOS JavaScript ウェブサービス

さまざまな種類の場所（コーヒー ショップ、図書館、美術館など）を表す場所アイコンがあります。アイコンと背景色は、プレイスクラスまたはプレイス サービスを使用してリクエストできます。

フィールド

場所アイコンを操作するには、次のフィールドを使用します。

フィールド プレイスクラス プレイス サービス
アイコン --- icon
アイコンの背景色 iconBackgroundColor icon_background_color
アイコンマスクの URI svgIconMaskURI icon_mask_base_uri
  • icon は、色付きの 71 × 71 ピクセルの PNG アイコンの URL を返します（プレイス サービスのみ）。
  • iconBackgroundColor と icon_background_color は、場所アイコンのカテゴリのデフォルトの 16 進数色コードを返します。
  • icon_mask_base_uri（プレイス サービス）は、色付きでないアイコンのベース URL から、ファイル形式の拡張子（.svg または .png の付加）を除いた値を返します。
  • svgIconMaskURI（プレイスクラス）は、色付きでない SVG アイコンのベース URL を返します。

マーカーに場所アイコンと色を適用する

Place Details で場所アイコンとそれに対応する背景色をリクエストして、マーカーに適用できます。次の例は、place.iconBackgroundColor を PinElement.background オプションに、place.svgIconMaskURI を PinElement.glyph に渡して、場所データを使ってマーカーを作成するコードを示しています。place.location を使ってマーカーを適切な場所に配置します。この例ではさらに、マーカーのタイトルに place.displayName を表示しています。

TypeScript

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
    id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] });

const pinElement = new PinElement({
    background: place.iconBackgroundColor,
    glyph: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarkerView = new AdvancedMarkerElement({
    map,
    position: place.location,
    content: pinElement.element,
    title: place.displayName,
});
index.ts

JavaScript

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
  id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({
  fields: [
    "location",
    "displayName",
    "svgIconMaskURI",
    "iconBackgroundColor",
  ],
});

const pinElement = new PinElement({
  background: place.iconBackgroundColor,
  glyph: new URL(String(place.svgIconMaskURI)),
});
const placeIconMarkerView = new AdvancedMarkerElement({
  map,
  position: place.location,
  content: pinElement.element,
  title: place.displayName,
});
index.js
例を見る

場所のアイコンと背景色のリクエスト

次の表には、利用可能な場所アイコンがカテゴリ別にまとめられています。デフォルトでは、これらのアイコンは黒いグリフで表示されます。アイコンの背景色は、場所のカテゴリによって指定されます。

場所のカテゴリ: 食品、飲料
（アイコンの背景色 #FF9E67）
バー
バー、
ナイトクラブ 		カフェ
カフェ 		レストラン
レストラン、ベーカリー
場所のカテゴリ: 小売
（アイコンの背景色 #4B96F3）
書店
書籍、衣料品、電化製品、ジュエリー、靴、
ショッピング センター / モール 		コンビニエンス ストア
コンビニエンス ストア 		食料品
食料品店、スーパーマーケット 		薬局
薬局
場所のカテゴリ: サービス
（アイコンの背景色 #909CE1）
ATM
ATM 		銀行
銀行 		ガソリン
ガソリン 		宿泊施設
宿泊施設
郵便局
郵便局
場所のカテゴリ: エンターテインメント
（アイコンの背景色 #13B5C7）
水族館、観光
水族館、観光 		ゴルフ
ゴルフ 		歴史にゆかりがある場所
歴史にゆかりがある場所 		映画
映画
博物館
博物館 		劇場
劇場
場所のカテゴリ: 交通機関
（アイコンの背景色 #10BDFF）
空港
空港 		バス
バス、配車サービス、タクシー 		電車 / 鉄道
電車 / 鉄道
場所のカテゴリ: 公営 / 一般 / 宗教施設
（アイコンの背景色 #7B9EB0）
墓地
墓地 		公民館
公民館 		図書館
図書館 		記念碑
記念碑
駐車場
駐車場 		学校（小学校、中学校、高校、大学）
学校（小学校、中学校、高校、大学） 		礼拝（キリスト教）
礼拝（キリスト教）
礼拝（ヒンズー教）
礼拝（ヒンズー教） 		礼拝（イスラム教）
礼拝（イスラム教） 		礼拝（ジャイナ教）
礼拝（ジャイナ教） 		礼拝（ユダヤ）
礼拝（ユダヤ教）
礼拝（シーク教）
礼拝（シーク教） 		一般的なお店やサービス
一般的なお店やサービス
場所のカテゴリ: アウトドア
（アイコンの背景色 #4DB546）
ボート
ボート 		キャンプ
キャンプ 		公園
公園 		スタジアム
スタジアム
動物園
動物園
場所のカテゴリ: 緊急対応
（アイコンの背景色 #F88181）
病院
病院 		警察
警察