プレイスアイコン

プラットフォームを選択: 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	銀行	ガソリン	宿泊施設
郵便局
場所のカテゴリ: エンターテインメント（アイコンの背景色 #13B5C7）
水族館、観光	ゴルフ	歴史にゆかりがある場所	映画
博物館	劇場
場所のカテゴリ: 交通機関（アイコンの背景色 #10BDFF）
空港	バス、配車サービス、タクシー	電車 / 鉄道
場所のカテゴリ: 公営 / 一般 / 宗教施設（アイコンの背景色 #7B9EB0）
墓地	公民館	図書館	記念碑
駐車場	学校（小学校、中学校、高校、大学）	礼拝（キリスト教）
礼拝（ヒンズー教）	礼拝（イスラム教）	礼拝（ジャイナ教）	礼拝（ユダヤ教）
礼拝（シーク教）	一般的なお店やサービス
場所のカテゴリ: アウトドア（アイコンの背景色 #4DB546）
ボート	キャンプ	公園	スタジアム
動物園
場所のカテゴリ: 緊急対応（アイコンの背景色 #F88181）
病院	警察