Udpates

frontend/src/components/map/JourneyInstructions.tsx

@@ -64,6 +64,27 @@ function getRouteDisplay(mode: string): { label: string; color: string; darkText
   return { label: clean, color: '#6b7280', darkText: false };
 }
 
+/** Returns a Unix timestamp for the next Monday at 07:30 local time. */
+function nextMondayAt730(): number {
+  const now = new Date();
+  const day = now.getDay(); // 0=Sun … 6=Sat
+  const daysUntil = day === 0 ? 1 : day === 1 ? 7 : 8 - day;
+  const monday = new Date(now);
+  monday.setDate(now.getDate() + daysUntil);
+  monday.setHours(7, 30, 0, 0);
+  return Math.floor(monday.getTime() / 1000);
+}
+
+function googleMapsUrl(postcode: string, destination: string): string {
+  const params = new URLSearchParams({
+    api: '1',
+    origin: postcode,
+    destination,
+    travelmode: 'transit',
+  });
+  return `https://www.google.com/maps/dir/?${params}&departure_time=${nextMondayAt730()}`;
+}
+
 function invertLegs(legs: JourneyLeg[]): JourneyLeg[] {
   return [...legs]
     .reverse()
@@ -235,6 +256,17 @@ export default function JourneyInstructions({
                 {displayLegs.map((leg, i) => (
                   <TimelineLeg key={i} leg={leg} isLast={i === displayLegs.length - 1} />
                 ))}
+                <a
+                  href={googleMapsUrl(postcode, j.label || j.slug)}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="mt-2 flex items-center justify-center gap-1.5 w-full text-[11px] font-medium text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-300 bg-white dark:bg-warm-900 border border-warm-200 dark:border-warm-700 rounded-md py-1.5 transition-colors"
+                >
+                  View on Google Maps
+                  <svg className="w-3 h-3" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
+                    <path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5M7.5 1.5H10.5V4.5M10.5 1.5L5.5 6.5" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                </a>
               </div>
             ) : (
               <span className="text-xs text-warm-500 dark:text-warm-400">