地図に追加されたマーカーのデザインと操作性をカスタマイズします。地図に追加されたマーカーのデザインと操作性をカスタマイズする方法は 2 つあります。
タイプに基づいてマーカーをスタイル設定する: 同じタイプのマーカーをスタイル設定するには、
MarkerOptionsオブジェクトを指定します。指定した変更は、各マーカーの作成後に適用され、デフォルトのオプションを上書きします。 例については、この ガイドの Change the styling of markers usingMarkerOptionsをご覧ください。データに基づいてマーカーをスタイル設定する: カスタマイズ関数を指定して、 データに基づいてマーカーをスタイル設定します。移動の共有や外部ソースのデータに基づいてスタイルを設定できます。
移動の共有からのデータ: 移動の共有では、マーカーが表すオブジェクトのタイプ（車両、出発地、経由地、目的地）など、マーカーデータを カスタマイズ関数に渡します。マーカーのスタイルは、マーカー要素の現在の状態に応じて変化します。たとえば、車両が移動を完了するまでの経由地の数などです。
外部ソース: 移動の共有データを 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.
});
}
};