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

このドキュメントでは、地図のデザインをカスタマイズする方法と、データの表示設定とビューポート オプションを管理する方法について説明します。その方法は次のとおりです。

  • Cloud ベースのマップのスタイル設定を使用する
  • 独自のコードで地図のスタイル オプションを直接設定する

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
  }
}

ルートのポリラインと車両の位置情報の表示ルール

車両の位置が表示されていない限り、ルートのポリラインは表示できません。表示すると、ポリラインの終点から車両の位置が推測される可能性があります。

これらのガイドラインは、ルート ポリラインと車両位置の表示オプションの有効な組み合わせを提供するのに役立ちます。

同じ公開設定オプション 視認性基準 ガイダンス
ルートのポリラインのオプションが常に表示されるように設定されています。 車両の位置情報を常に表示するよう設定します。
車両の位置情報を常に非表示に設定しました。 ルートのポリラインを常に非表示に設定します。
公開設定オプションは次のいずれかです。
  • 残りの停止回数
  • 到着予定時刻までの時間
  • 残りの走行距離

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

    "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,
  ...
});

次のステップ