オンデマンド配車および配達ソリューションは現在、一部のパートナー様のみご利用いただけます。

このページは Cloud Translation API によって翻訳されました。

Consumer SDK for JavaScript のスタートガイド

JavaScript SDK を使用すると、Fleet Engine で追跡されている車両の位置情報と関心のある位置情報を可視化できます。このライブラリには、標準の google.maps.Map エンティティとデータコンポーネントの代わりに Fleet Engine に接続できる JavaScript 地図コンポーネントが含まれています。JavaScript SDK を使用すると、カスタマイズ可能なアニメーション化された移動および注文状況のエクスペリエンスをウェブアプリケーションから提供できます。

コンポーネント

JavaScript SDK は、車両と地点を可視化するためのコンポーネントと、ドライバーの到着予定時刻や残りの走行距離の元データフィードを提供します。

移動状況と注文状況の地図表示

地図表示コンポーネントは、車両と地点の位置を可視化します。車両のルートがわかっている場合、地図表示コンポーネントは、車両が予測された経路に沿って移動するにつれて、その車両にアニメーションを表示します。

ルート位置情報プロバイダ

JavaScript SDK には、追跡中のオブジェクトの位置情報をルートと注文の進行状況マップにフィードするルート位置情報プロバイダが含まれています。

ルート位置情報プロバイダを使用すると、次の情報をトラッキングできます。

ルートの乗車場所または降車場所。
ルートに割り当てられている車両の場所と経路。

追跡中の位置情報オブジェクト

位置情報プロバイダは、地点や車両などのオブジェクトの位置を追跡します。

出発地

出発地の場所は、移動の出発点です。乗車場所を示します。

宛先のロケーション

目的地の場所は、行程が終わる場所です。降車場所を示します。

地点の位置

ウェイポイントの位置とは、追跡しているルート上の任意の地点を指します。たとえば、バス路線の各停車場所は地点を表します。

車両の位置

車両の位置とは、車両のトラッキング位置です。必要に応じて車両のルートを含めることもできます。

認証トークンフェッチャー

Fleet Engine に保存されている位置情報データへのアクセスを制御するには、Fleet Engine 用の JSON Web Token（JWT）作成サービスをサーバーに実装する必要があります。次に、JavaScript SDK を使用して位置情報へのアクセスを認証し、ウェブアプリケーションの一部として認証トークンフェッチャーを実装します。

スタイル設定オプション

マーカーとポリラインのスタイルにより、地図上のトラッキングする位置情報オブジェクトの外観が決まります。カスタムスタイルオプションを使用すると、デフォルトのスタイルをウェブアプリケーションのスタイルに合わせて変更できます。

追跡中の場所の公開設定を管理する

このセクションでは、Fleet Engine の事前定義された位置情報プロバイダの地図上の追跡対象位置情報オブジェクトの公開設定ルールについて説明します。カスタムまたは派生の位置情報プロバイダが公開設定ルールを変更することがあります。

乗り物

配車サービス車両は、ルートに割り当てられてから降車するまで表示されます。ルートがキャンセルされると、車両はより長く見えます。

その他の場所マーカー

出発地、目的地、地点のその他の場所マーカーはすべて、常に地図上に表示されます。たとえば、ライドシェアリングの持ち込み場所や荷物の配達場所は、ルートや配送の状況にかかわらず、常に地図に表示されます。

JavaScript SDK を使ってみる

JavaScript SDK を使用する前に、Fleet Engine と API キーの取得について理解しておいてください。

配車サービスのルートを追跡するには、まずルート ID の申し立てを作成します。

旅行 ID の申し立てを作成する

ルート位置情報プロバイダを使用してルートを追跡するには、ルート ID クレームを含む JSON Web Token（JWT）を作成します。

JWT ペイロードを作成するには、認証セクションにキー tripid を使用してクレームを追加し、その値をルート ID に設定します。

次の例は、ルート ID で追跡するためのトークンを作成する方法を示しています。

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "tripid": "tid_12345",
   }
}

認証トークンフェッチャーを作成する

認証トークンフェッチャーを作成すると、プロジェクトのサービスアカウント証明書を使用して、サーバー上で適切なクレームで作成されたトークンを取得できます。トークンはサーバー上でのみ作成し、クライアント上では決して共有しないことが重要です。そうしないと、システムのセキュリティが侵害されます。

フェッチャーは、Promise でラップされた 2 つのフィールドを持つデータ構造を返す必要があります。

文字列 token。
数値 expiresInSeconds。トークンは、取得後、この時間内に期限切れになります。

次のいずれかに該当する場合、JavaScript Consumer SDK は認証トークンフェッチャーを介してトークンをリクエストします。

有効なトークンがない（新しいページの読み込み時にフェッチャーが呼び出されていない場合や、フェッチャーがトークンで返されていない場合など）。
以前に取得したトークンの有効期限が切れています。
以前に取得したトークンが 1 分以内に期限切れになる。

それ以外の場合、SDK は以前に発行された有効なトークンを使用し、フェッチャーを呼び出しません。

次の例は、認証トークンフェッチャーを作成する方法を示しています。

JavaScript

async function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.jwt,
    expiresInSeconds: data.expirationTimestamp - Date.now(),
  };
}

トークンを作成するためのサーバーサイドエンドポイントを実装する場合は、次の点に注意してください。

エンドポイントはトークンの有効期限を返す必要があります。上記の例では、data.ExpiresInSeconds と指定されています。
認証トークンフェッチャーは、例に示すように有効期限（フェッチした時点から秒単位）をライブラリに渡す必要があります。
SERVER_TOKEN_URL はプロバイダの実装によって異なります。サンプルプロバイダの URL は次のとおりです。
- https://SERVER_URL/token/driver/VEHICLEID
- https://SERVER_URL/token/consumer/TRIPID

HTML から地図を読み込む

次の例は、指定した URL から JavaScript SDK を読み込む方法を示しています。callback パラメータにより、API の読み込み後に initMap 関数が実行されます。defer 属性を使用すると、API の読み込み中でもブラウザがページの残りの部分をレンダリングし続けることができます。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

旅行中

このセクションでは、JavaScript SDK を使用してライドシェアリングまたは配達を追跡する方法について説明します。コードを実行する前に、スクリプトタグで指定されたコールバック関数からライブラリを読み込むようにしてください。

ルートの位置情報プロバイダをインスタンス化する

JavaScript SDK では、Fleet Engine Ridesharing API の位置情報プロバイダが事前定義されています。プロジェクト ID とトークンファクトリへの参照を使用して、トークンファクトリをインスタンス化します。

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

地図表示を初期化する

JavaScript SDK を読み込んだら、地図ビューを初期化して HTML ページに追加します。ページには、地図ビューを保持する <div> 要素が含まれている必要があります。以下の例では、<div> 要素に map_canvas という名前が付けられています。

競合状態を回避するには、地図の初期化後に呼び出されるコールバックで、位置情報プロバイダのルート ID を設定します。

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise, the 'ready' event above may 
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise, the 'ready' event above may 
// not fire. The user also has access to the mapView 
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

変更イベントをリッスンする

位置情報プロバイダを使用して、タスクオブジェクトからルートに関するメタ情報を取得できます。メタ情報には到着予定時刻や、乗車または降車前の残り距離が含まれます。メタ情報が変更されると、update イベントがトリガーされます。次の例は、これらの変更イベントをリッスンする方法を示しています。

JavaScript

locationProvider.addListener('update', e => {
  // e.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

TypeScript

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  // e.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

エラーを処理する

ルート情報のリクエストとは非同期的に発生するエラーにより、エラーイベントがトリガーされます。次の例は、エラーを処理するためにこれらのイベントをリッスンする方法を示しています。

JavaScript

locationProvider.addListener('error', e => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

注: 予期しないエラーを処理するため、ライブラリ呼び出しは try...catch ブロックでラップしてください。

トラッキングを停止

位置情報プロバイダによるルートのトラッキングを停止するには、位置情報プロバイダからルート ID を削除します。

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

地図表示から位置情報プロバイダを削除する

次の例は、地図表示から位置情報プロバイダを削除する方法を示しています。

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

基本地図の外観をカスタマイズする

地図コンポーネントのデザインをカスタマイズするには、クラウドベースのツールを使用するか、コードで直接オプションを設定して、地図のスタイルを設定します。

Cloud ベースのマップのスタイル設定を使用する

Cloud ベースのマップのスタイル設定を使用すると、Google Cloud コンソールから、Google マップを使用するアプリの地図のスタイルを作成、編集できます。コードを変更する必要はありません。地図のスタイルは、Cloud プロジェクトにマップ ID として保存されます。JavaScript SDK 地図にスタイルを適用するには、JourneySharingMapView の作成時に mapId とその他の mapOptions を指定します。JourneySharingMapView がインスタンス化された後に、mapId フィールドを変更したり追加したりすることはできません。次の例では、以前に作成した地図のスタイルをマップ ID で有効にする方法を示しています。

JavaScript

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

TypeScript

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

コードベースの地図のスタイル設定を使用する

地図のスタイルをカスタマイズするもう 1 つの方法は、JourneySharingMapView の作成時に 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" }
        ]
      }
    ]
  }
});

マーカーのカスタマイズ機能を使用する

JavaScript SDK では、地図に追加されるマーカーのデザインをカスタマイズできます。そのためには、マーカーのカスタマイズを指定します。カスタマイズは、地図にマーカーを追加する前やマーカーが更新されるたびに、JavaScript SDK によって適用されます。

最も簡単なカスタマイズは、同じタイプのすべてのマーカーに適用する MarkerOptions オブジェクトを指定することです。オブジェクトで指定した変更は、マーカーが作成されるたびに適用され、デフォルトのオプションはすべて上書きされます。

より高度な方法は、カスタマイズ関数を指定することです。カスタマイズ機能により、データに基づいてマーカーのスタイルを設定できるほか、クリック処理などのインタラクティブ機能をマーカーに追加できます。具体的には、マーカーが表すオブジェクトの種類（車両、出発地、地点、目的地）に関するデータをカスタマイズ関数に渡します。これにより、マーカー要素自体の現在の状態（車両がルートを終えるまでの残りの地点の数など）に基づいて、マーカーのスタイルを変更できるようになります。Fleet Engine の外部にあるソースのデータと結合し、その情報を基にマーカーのスタイルを設定することもできます。

JavaScript SDK の FleetEngineTripLocationProviderOptions には、次のカスタマイズパラメータが用意されています。

`MarkerOptions` を使用してマーカーのスタイルを変更する

次の例は、MarkerOptions オブジェクトを使って車両マーカーのスタイルを設定する方法を示しています。上記のマーカーのカスタマイズ方法を使用して、マーカーのスタイルをカスタマイズするには、このパターンに従います。

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  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.
      });
    }
  };

ポリラインのカスタマイズを使用する

JavaScript SDK を使って、地図上のルートのデザインをカスタマイズすることもできます。このライブラリは、 google.maps.Polyline 車両の有効な経路または残りの経路にある経路内の座標のペアごとにオブジェクトを作成します。ポリラインのカスタマイズを指定することで、Polyline オブジェクトのスタイルを設定できます。その後、ライブラリは、オブジェクトを地図に追加する前と、オブジェクトに使用されるデータが変更されたときの 2 つの状況で、これらのカスタマイズを適用します。

マーカーのカスタマイズと同様に、PolylineOptions のセットを指定して、一致するすべての Polyline オブジェクトの作成時または更新時にそのオブジェクトに適用できます。

同様に、カスタマイズ関数を指定できます。カスタマイズ関数を使用すると、Fleet Engine から送信されたデータに基づいてオブジェクトのスタイルを個別に設定できます。この関数では、車両の現在の状態に基づいて各オブジェクトのスタイルを変更できます。たとえば、Polyline オブジェクトに色を深くしたり、車両の走行速度が遅いときは厚くしたりできます。Fleet Engine の外部にあるソースからの結合を行い、その情報に基づいて Polyline オブジェクトのスタイルを設定することもできます。

FleetEngineTripLocationProviderOptions で提供されるパラメータを使用して、カスタマイズを指定できます。車両の移動におけるさまざまな経路の状態（すでに走行中、走行中、未走行など）をカスタマイズできます。パラメータは次のとおりです。

takenPolylineCustomization: すでに移動した経路の場合
activePolylineCustomization: 移動中のパス。
remainingPolylineCustomization: まだ移動していないパス。

`PolylineOptions` を使用して `Polyline` オブジェクトのスタイルを変更する

次の例は、PolylineOptions を使用して Polyline オブジェクトのスタイルを設定する方法を示しています。このパターンに従って、Polyline オブジェクトのスタイルを、前述のポリラインのカスタマイズを使ってカスタマイズします。

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

カスタマイズ関数を使用して `Polyline` オブジェクトのスタイルを変更する

次の例は、アクティブな Polyline オブジェクトのスタイルを設定する方法を示しています。このパターンに従って、前述のポリラインのカスタマイズパラメータのいずれかを使って Polyline オブジェクトのスタイルをカスタマイズします。

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

`Polyline` オブジェクトの表示の制御

デフォルトでは、すべての Polyline オブジェクトが表示されます。Polyline オブジェクトを非表示にするには、その visible プロパティを設定します。

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

トラフィック対応 `Polyline` オブジェクトをレンダリングする

Fleet Engine は、フォローしている車両の有効な経路と残りの経路の交通速度データを返します。この情報を使用して、トラフィック速度に応じて Polyline オブジェクトのスタイルを設定できます。

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

車両マーカーまたは場所マーカーの `InfoWindow` を表示する

InfoWindow を使用すると、車両または場所のマーカーに関する追加情報を表示できます。

次の例は、InfoWindow を作成して車両マーカーにアタッチする方法を示しています。

JavaScript

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

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  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.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  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();

自動適合を無効にする

自動適合を無効にすることで、地図がビューポートを車両と予想ルートに自動合わせないようにすることができます。次の例では、ルートと注文の進捗状況を地図に表示する際に、自動フィッティングを無効にする方法を示します。

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

既存の地図を置き換える

JavaScript SDK を使用すると、マーカーやその他のカスタマイズを含む既存の地図を、それらのカスタマイズを失うことなく置き換えることができます。

たとえば、マーカーが表示される標準の google.maps.Map エンティティを含むウェブページがあるとします。

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

JavaScript SDK を追加するには:

認証トークンファクトリのコードを追加します。
initMap() 関数で位置情報プロバイダを初期化します。
initMap() 関数でマップビューを初期化します。ビューには地図が含まれます。
カスタマイズ内容を地図ビューの初期化のコールバック関数に移動します。
API ローダに位置情報ライブラリを追加します。

次の例は、加える変更を示しています。

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

// (1) Authentication Token Fetcher
async function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider.
  locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
    projectId: "YOUR_PROVIDER_ID",
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

  locationProvider.tripId = TRIP_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };

    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the SDK to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

指定された ID を持つルート（ウルル付近）を運営すると、地図上にレンダリングされるようになりました。

Consumer SDK for JavaScript のスタートガイド

コンポーネント

移動状況と注文状況の地図表示

ルート位置情報プロバイダ

追跡中の位置情報オブジェクト

出発地

宛先のロケーション

地点の位置

車両の位置

認証トークン フェッチャー

スタイル設定オプション

追跡中の場所の公開設定を管理する

乗り物

その他の場所マーカー

JavaScript SDK を使ってみる

旅行 ID の申し立てを作成する

認証トークン フェッチャーを作成する

JavaScript

TypeScript

HTML から地図を読み込む

旅行中

ルートの位置情報プロバイダをインスタンス化する

JavaScript

TypeScript

地図表示を初期化する

JavaScript

TypeScript

変更イベントをリッスンする

JavaScript

TypeScript

エラーを処理する

JavaScript

TypeScript

トラッキングを停止

JavaScript

TypeScript

地図表示から位置情報プロバイダを削除する

JavaScript

TypeScript

基本地図の外観をカスタマイズする

Cloud ベースのマップのスタイル設定を使用する

JavaScript

TypeScript

コードベースの地図のスタイル設定を使用する

JavaScript

TypeScript

マーカーのカスタマイズ機能を使用する

MarkerOptions を使用してマーカーのスタイルを変更する

JavaScript

TypeScript

カスタマイズ機能を使用してマーカーのスタイルを変更する

JavaScript

TypeScript

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

JavaScript

TypeScript

ポリラインのカスタマイズを使用する

PolylineOptions を使用して Polyline オブジェクトのスタイルを変更する

JavaScript

TypeScript

カスタマイズ関数を使用して Polyline オブジェクトのスタイルを変更する

JavaScript

TypeScript

Polyline オブジェクトの表示の制御

JavaScript

TypeScript

トラフィック対応 Polyline オブジェクトをレンダリングする

JavaScript

TypeScript

車両マーカーまたは場所マーカーの InfoWindow を表示する

JavaScript

TypeScript

自動適合を無効にする

JavaScript

TypeScript

既存の地図を置き換える

認証トークンフェッチャー

認証トークンフェッチャーを作成する

`MarkerOptions` を使用してマーカーのスタイルを変更する

`PolylineOptions` を使用して `Polyline` オブジェクトのスタイルを変更する

カスタマイズ関数を使用して `Polyline` オブジェクトのスタイルを変更する

`Polyline` オブジェクトの表示の制御

トラフィック対応 `Polyline` オブジェクトをレンダリングする

車両マーカーまたは場所マーカーの `InfoWindow` を表示する