有了地圖跟標記，今天要讓 SyncETA Lite 具備「算路線」的能力。目標檔案：src/api/googleMaps.js。

建立路線查詢函式

// src/api/googleMaps.js
import { Loader } from '@googlemaps/js-api-loader';

const loader = new Loader({
  apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
  version: 'weekly',
});

export async function getRoute(origin, destination, travelMode = 'TRANSIT') {
  const { DirectionsService } = await loader.importLibrary('routes');
  const service = new DirectionsService();

  const result = await service.route({
    origin,
    destination,
    travelMode,
  });

  const leg = result.routes[0].legs[0];

  return {
    durationText: leg.duration.text,   // 例如 "18 分鐘"
    durationSeconds: leg.duration.value,
    distanceText: leg.distance.text,
    path: result.routes[0].overview_path,
  };
}

這裡的 travelMode: 'TRANSIT' 代表我們查的是大眾運輸路線（而非開車或步行），這對通勤情境來說最貼切。

在地圖上畫出路線

回到 src/components/Map.js，新增一個畫路線的函式：

// src/components/Map.js（新增）
export async function drawRoute(path) {
  const { Polyline } = await loader.importLibrary('maps');
  return new Polyline({
    path,
    map: mapInstance,
    strokeColor: '#2563eb',
    strokeWeight: 4,
  });
}

串起來測試

// src/main.js
import { getRoute } from './api/googleMaps.js';
import { drawRoute } from './components/Map.js';

async function setupRoute() {
  const origin = { lat: 25.0478, lng: 121.5170 };
  const destination = { lat: 25.0421, lng: 121.5079 };

  const route = await getRoute(origin, destination);
  console.log(`預估時間：${route.durationText}`);

  await drawRoute(route.path);
}

setupRoute();

存檔測試後，地圖上應該會出現一條藍色路線，Console 也會印出預估交通時間。

這是我們第一次讓系統具備「算出到達需要多久」的能力，也是明天要把 TDX 與 Google Maps 兩份資料真正融合的基礎。