地図のスタイルを設定する

このドキュメントでは、地図のルック アンド フィールをカスタマイズし、データの可視性とビューポート オプションを制御する方法について説明します。その方法は次のとおりです。

  • クラウドベースの地図のスタイル機能を使用する
  • 独自のコードで地図のスタイル オプションを直接設定する

Cloud ベースのマップのスタイル設定で地図のスタイルを設定する

JavaScript の利用者向け乗車共有地図に地図のスタイルを適用するには、JourneySharingMapView を作成するときに mapId とその他の mapOptions を指定します。

次の例は、マップ ID を使用して地図のスタイルを適用する方法を示しています。

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

独自のコードで地図のスタイルを直接設定する

JourneySharingMapView の作成時に地図オプションを設定して、地図のスタイルをカスタマイズすることもできます。次の例は、地図オプションを使用して地図のスタイルを設定する方法を示しています。設定できる地図オプションについて詳しくは、Google Maps JavaScript API リファレンスの mapOptions をご覧ください。

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

SDK に対するタスクデータの可視性を制御する

表示ルールを使用すると、地図上の特定のタスク オブジェクトの表示を制御できます。

タスクデータのデフォルトの公開設定

デフォルトでは、車両に割り当てられたタスクのデータは、車両がタスクの 5 つの停車地の範囲内にある場合に表示されます。タスクが完了またはキャンセルされると、可視性は終了します。

次の表に、各タイプのタスクのデフォルトの公開設定を示します。多くのタスクで公開設定をカスタマイズできますが、一部のタスクではカスタマイズできません。タスクタイプの詳細については、スケジュール設定されたタスクガイドのタスクタイプをご覧ください。

タスクの種類 デフォルトの公開設定 カスタマイズ可能か？ 説明
利用不可タスク 非表示 いいえ 運転手の休憩や給油に使用されます。配達タスクへのルートに別の車両の停車地も含まれている場合、その停車地に利用不可タスクのみが含まれていると、その停車地は表示されません。配達タスク自体には、予想到着時刻とタスク完了までの推定時間が引き続き表示されます。
車両タスクを開く 表示 ○ タスクが完了またはキャンセルされると、表示は終了します。未解決の車両タスクの表示 / 非表示をカスタマイズできます。未解決の車両タスクの表示をカスタマイズするをご覧ください。
終了した車両タスク 非表示 いいえ 完了した車両タスクの表示 / 非表示をカスタマイズすることはできません。

未解決の車両タスクの表示をカスタマイズする

TaskTrackingInfo インターフェースは、Consumer SDK で表示できるタスク データ要素を多数提供します。

カスタマイズ可能なタスクデータ要素

ルートのポリライン

到着予定時刻

タスクの推定完了時間

タスクまでの残りの運転距離

残りのストップ数

車両の販売店

タスクごとの公開設定オプション

Fleet Engine 内でタスクを作成または更新するときに TaskTrackingViewConfig を設定することで、タスクごとに公開設定をカスタマイズできます。次の表示設定オプションを使用して、タスク要素の表示設定を決定する条件を作成します。

公開設定オプション

残りのストップ数

到着予定時刻までの時間

残りの走行距離

常に表示

非表示

たとえば、次の表に示す条件を使用して 3 つのデータ要素の公開設定を調整するカスタマイズがあるとします。他のすべての要素は、デフォルトの可視性ルールに従います。

調整するデータ要素 公開設定 Criterion
ルートのポリライン 表示 車両が 3 つの停留所以内にあります。
ETA 表示 残りの運転距離が 5,000 メートル未満の場合。
残りのストップ数 表示しない 車両が 3 つの停留所以内にあります。

次の例は、この構成を示しています。

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

ルートのポリラインと車両の位置の公開設定ルール

車両の位置も表示されない限り、ルートのポリラインは表示できません。そうしないと、ポリラインの終点から車両の位置を推測できてしまうためです。

これらのガイドラインは、ルートのポリラインと車両の位置情報の可視性オプションの有効な組み合わせを指定するのに役立ちます。

同じ公開設定オプション 表示基準 ガイダンス
ルートのポリラインのオプションが常に表示されるように設定されています。 車両の位置を常に表示するように設定します。
車両の位置情報が非表示に設定されている。 ルートのポリラインを非表示に設定します。
公開設定オプションは次のいずれかです。
  • 残りの停車回数
  • ETA までの期間
  • 残りの運転距離

ルートのポリライン オプションを、車両の位置に設定された値以下の値に設定します。次に例を示します。

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
さまざまな公開設定オプション 表示条件 ガイダンス
車両の位置情報が表示される

これは、車両の位置情報とポリラインの公開設定オプションの両方が満たされている場合にのみ発生します。次に例を示します。

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

この例では、残りの停留所数が 3 以上かつ残りの走行距離が 3, 000 メートル以上の場合にのみ、車両の位置が表示されます。

自動調整を無効にする

自動調整を無効にすると、地図のビューポートが車両と予測ルートに自動的に調整されなくなります。次の例は、ジャーニー共有の地図ビューを構成するときに自動調整を無効にする方法を示しています。

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

次のステップ