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

このドキュメントでは、消費者向けのウェブベースの配送追跡アプリで使用する地図で、車両と位置のマーカーをカスタマイズする方法について説明します。

JavaScript Consumer SDK を使用すると、マップに追加される 2 種類のマーカーのデザインと操作性をカスタマイズできます。

これには次の 2 つの方法があります。

  • 最も単純な方法: 同じタイプのすべてのマーカーに適用する MarkerOptions オブジェクトを指定します。Consumer SDK は、マーカーをマップに追加する前と、マーカーに使用されるデータが変更されたときの 2 つの状況でスタイルを適用します。
  • More advanced: カスタマイズ関数を指定します。カスタマイズ機能を使用すると、データに基づいてマーカーのスタイルを設定したり、クリック処理などのインタラクティブ機能をマーカーに追加したりできます。具体的には、Consumer SDK は、マーカーが表すオブジェクトのタイプ（車両または目的地）に関するデータをカスタマイズ関数に渡します。これにより、マーカー要素自体の現在の状態（目的地までの残りの予定停車回数など）に基づいてマーカーのスタイルを変更できます。Fleet Engine 以外のソースのデータと結合して、その情報に基づいてマーカーのスタイルを設定することもできます。

簡単な例: MarkerOptions を使用する

次の例は、MarkerOptions オブジェクトを使用して車両マーカーのスタイルを設定する方法を示しています。この例では、マーカーの不透明度を 50% に設定しています。

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

高度な例: カスタマイズ関数を使用する

次の例は、予定されているタスクの停車地に到着する前に、車両の残りの停車回数を表示するように車両マーカーのスタイルを設定する方法を示しています。

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

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

次の車両マーカーの例のように、任意のマーカーにクリック処理を追加できます。

JavaScript

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

TypeScript

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

マーカーの追加情報を表示する

InfoWindow を使用して、車両または位置マーカーに関する追加情報を表示できます。次の例では、InfoWindow を作成して車両マーカーにアタッチします。

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

次のステップ