マーカーをカスタマイズする

プラットフォームを選択: Android iOS JavaScript

地図に追加されたマーカーのデザインと操作性をカスタマイズします。地図に追加されたマーカーのデザインと操作性をカスタマイズするには、次の 2 つの方法があります。

  1. タイプに基づいてマーカーのスタイルを設定する: 同じタイプのマーカーのスタイルを設定する MarkerOptions オブジェクトを指定します。指定した変更は、各マーカーの作成後に適用され、デフォルトのオプションが上書きされます。例については、このガイドの MarkerOptions を使用してマーカーのスタイルを変更するをご覧ください。

  2. データに基づいてマーカーのスタイルを設定する: データに基づいてマーカーのスタイルを設定するカスタマイズ関数を指定します。ジャーニー共有のデータまたは外部ソースのデータに基づいてスタイルを設定できます。

    • ルート共有のデータ: ルート共有は、マーカーが表すオブジェクトのタイプ（車両、出発地、経由地、目的地）など、マーカーデータをカスタマイズ関数に渡します。マーカーのスタイルは、マーカー要素の現在の状態に基づいて変更されます。たとえば、車両が乗車を完了するまでの残りの経由地の数などです。

    • 外部ソース: 乗車共有データを Fleet Engine 以外のソースのデータと組み合わせて、その情報に基づいてマーカーのスタイルを設定することもできます。

    例については、このガイドのカスタマイズ関数を使用してマーカーのスタイルを変更するをご覧ください。

  3. マーカーにクリック処理を追加する: 例については、クリック処理を追加するをご覧ください。

マーカーのカスタマイズ オプション

どちらのオプションでも、Google Maps JavaScript API の FleetEngineTripLocationProviderOptions で次のカスタマイズ パラメータを使用します。

MarkerOptions を使用してマーカーのスタイルを変更する

次の例は、MarkerOptions オブジェクトを使用して車両マーカーのスタイルを設定する方法を示しています。このパターンに沿って、マーカーのカスタマイズ オプションに記載されているマーカーのカスタマイズを使用して、マーカーのスタイルをカスタマイズします。

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

カスタマイズ関数を使用してマーカーのスタイルを変更する

次の例は、カスタマイズ関数を使用して車両マーカーのスタイルを設定する方法を示しています。このパターンに沿って、マーカーのカスタマイズ オプションに記載されているマーカーのカスタマイズ パラメータを使用して、マーカーのスタイルをカスタマイズします。

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

マーカーにクリック処理を追加する

次の例は、車両マーカーにクリック処理を追加する方法を示しています。このパターンに沿って、マーカーのカスタマイズ オプションに記載されているマーカーのカスタマイズ パラメータを使用して、任意のマーカーにクリック処理を追加します。

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

次のステップ