地図に追加されるマーカーのデザインをカスタマイズします。地図に追加したマーカーの外観と操作性は、次の 2 つの方法でカスタマイズできます。
タイプに基づいてマーカーのスタイルを設定する: 同じタイプのマーカーのスタイルを設定するには、
MarkerOptionsオブジェクトを指定します。指定した変更は、各マーカーの作成後に適用され、デフォルトのオプションが上書きされます。例については、このガイドのMarkerOptionsを使用してマーカーのスタイルを変更するをご覧ください。データに基づくマーカーのスタイル設定: データに基づいてマーカーのスタイルを設定するカスタマイズ関数を指定します。経路の共有や外部ソースのデータに基づいてスタイルを設定できます。
ルート共有のデータ: ルート共有では、マーカーが表すオブジェクトのタイプ（車両、出発地、ウェイポイント、目的地）など、マーカーデータがカスタマイズ関数に渡されます。そうすると、マーカー要素の現在の状態に基づいてマーカーのスタイルが変化します。たとえば、車両がルートを完了するまでの残りのウェイポイント数などです。
外部ソース: ルート共有データと Fleet Engine 外部のソースのデータとを組み合わせて、その情報に基づいてマーカーのスタイルを設定することもできます。
例については、このガイドのカスタマイズ関数を使用してマーカーのスタイルを変更するをご覧ください。
マーカーにクリック処理を追加する: 例については、クリック処理を追加するをご覧ください。
マーカーのカスタマイズ オプション
どちらのオプションでも、Google Maps JavaScript API の FleetEngineTripLocationProviderOptions にある以下のカスタマイズ パラメータを使用します。
vehicleMarkerCustomizationoriginMarkerCustomizationwaypointMarkerCustomizationdestinationMarkerCustomization
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.
});
}
};