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
- https://
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
には、次のカスタマイズ パラメータが用意されています。
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
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 を持つルート(ウルル付近)を運営すると、地図上にレンダリングされるようになりました。