이동을 추적하면 소비자 앱이 소비자에게 적절한 차량의 위치를 표시합니다. 이렇게 하려면 앱에서 이동 추적을 시작하고 이동 중에 이동 진행률을 업데이트한 후 이동이 완료되면 이동 추적을 중지해야 합니다.
이 문서에서는 이 프로세스의 다음과 같은 주요 단계를 다룹니다.
- 지도 설정
- 지도 초기화 및 공유된 여정 표시
- 경로 진행 상황 업데이트 및 확인
- 여행 팔로우 중지하기
- 이동 오류 처리
지도 설정
웹 앱에서 배송 상품 수령 또는 배송을 추적하려면 지도를 로드하고 Consumer SDK를 인스턴스화하여 이동 추적을 시작해야 합니다. 새 지도를 로드하거나 기존 지도를 사용할 수 있습니다. 그런 다음 초기화 함수를 사용하여 Consumer SDK를 인스턴스화하여 지도 뷰가 추적 중인 항목의 위치에 해당하도록 합니다.
Google Maps JavaScript API를 사용하여 새 지도 로드
새 지도를 만들려면 웹 앱에서 Google Maps JavaScript API를 로드합니다. 다음 예에서는 Google Maps JavaScript API를 로드하고, SDK를 사용 설정하고, 초기화 검사를 트리거하는 방법을 보여줍니다.
callback매개변수는 API가 로드된 후initMap함수를 실행합니다.defer속성을 사용하면 API가 로드되는 동안 브라우저가 페이지의 나머지 부분을 계속 렌더링할 수 있습니다.
initMap 함수를 사용하여 소비자 SDK를 인스턴스화합니다. 예를 들면 다음과 같습니다.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
기존 지도 로드
이미 사용 중인 지도와 같이 Google Maps JavaScript API로 만든 기존 지도를 로드할 수도 있습니다.
예를 들어 다음 HTML 코드에 정의된 대로 마커가 표시되는 표준 google.maps.Map 항목이 있는 웹페이지가 있다고 가정해 보겠습니다. 끝에 있는 콜백에서 동일한 initMap 함수를 사용하여 지도를 표시합니다.
<!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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Pier 39
var marker = new google.maps.Marker({position: pier39, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The defer attribute allows the browser to render the page while the API loads.
* The key parameter contains your own API key.
* 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>
기존 지도 교체
마커나 기타 맞춤설정이 포함된 기존 지도를 맞춤설정을 잃지 않고 대체할 수 있습니다.
예를 들어 마커가 표시된 표준 google.maps.Map 항목이 있는 웹페이지가 있는 경우 지도를 교체하고 마커를 유지할 수 있습니다. 이 섹션에서는 이 작업을 수행하는 단계를 설명합니다.
지도를 교체하고 맞춤설정을 유지하려면 다음 단계에 따라 HTML 페이지에 경로 공유를 추가하세요. 다음 예시에도 번호가 매겨져 있습니다.
인증 토큰 팩토리의 코드를 추가합니다.
initMap()함수에서 위치 제공자를 초기화합니다.initMap()함수에서 지도 뷰를 초기화합니다. 뷰에 지도맞춤설정을 지도 뷰 초기화의 콜백 함수로 이동합니다.
API 로더에 위치 라이브러리를 추가합니다.
다음 예는 변경사항을 보여줍니다. 울루루 근처에서 지정된 ID로 이동을 운영하면 이제 지도에 렌더링됩니다.
<!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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Pier 39
var marker = new google.maps.Marker({position: pier39, 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>
지도 초기화 및 경로 진행률 표시
이동이 시작되면 앱은 이동 위치 제공자를 인스턴스화한 다음 지도 초기화를 통해 이동 진행 상황 공유를 시작해야 합니다. 예시는 다음 섹션을 참고하세요.
이동 위치 정보 제공자 인스턴스화
JavaScript SDK에는 Fleet Engine Ridesharing API용으로 사전 정의된 위치 정보 제공자가 있습니다. 프로젝트 ID와 토큰 팩토리의 참조를 사용하여 인스턴스화합니다.
자바스크립트
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: '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',
});
지도 뷰 초기화
JavaScript SDK를 로드한 후 지도 뷰를 초기화하고 HTML 페이지에 추가합니다. 페이지에 지도 뷰를 포함하는 <div> 요소가 있어야 합니다. 다음 예에서 <div> 요소의 이름은 map_canvas입니다.
자바스크립트
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// 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 starts 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 choose.
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.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// 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 starts 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 choose.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
경로 진행 상황 업데이트 및 확인
앱은 이벤트를 수신 대기하고 이동이 진행됨에 따라 이동 진행률을 업데이트해야 합니다. 위치 정보 제공자를 사용하여 작업 객체에서 이동에 관한 메타 정보를 가져올 수 있습니다. 메타 정보에는 도착 예정 시간과 승차 또는 하차까지의 남은 거리가 포함됩니다. 메타 정보 변경사항은 업데이트 이벤트를 트리거합니다. 다음 예는 이러한 변경 이벤트를 수신 대기하는 방법을 보여줍니다.
자바스크립트
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);
});
여행 팔로우 중지하기
이동이 끝나면 위치 제공업체에서 이동을 추적하지 못하도록 해야 합니다. 이렇게 하려면 이동 ID와 위치 제공업체를 삭제합니다. 예시는 다음 섹션을 참고하세요.
위치 정보 제공업체에서 경로 ID 삭제
다음 예는 위치 제공업체에서 이동 ID를 삭제하는 방법을 보여줍니다.
자바스크립트
locationProvider.tripId = '';
TypeScript
locationProvider.tripId = '';
지도 뷰에서 위치 제공업체 삭제
다음 예는 지도 뷰에서 위치 제공업체를 삭제하는 방법을 보여줍니다.
자바스크립트
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
이동 오류 처리
경로 정보를 요청할 때 비동기식으로 발생하는 오류는 오류 이벤트를 트리거합니다. 다음 예는 이러한 이벤트를 수신 대기하여 오류를 처리하는 방법을 보여줍니다.
자바스크립트
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);
});