Add Google map location for bus stop

hkbus · Feb 27, 2024 · 5b5ef42 · 5b5ef42
1 parent 64f774c
commit 5b5ef42
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/src/components/route-eta/StopDialog.tsx b/src/components/route-eta/StopDialog.tsx
@@ -3,6 +3,7 @@ import {
   Bookmark as BookmarkIcon,
   Close as CloseIcon,
   Directions as DirectionsIcon,
+  MapOutlined as MapIcon,
 } from "@mui/icons-material";
 import {
   Box,
@@ -54,6 +55,15 @@ const StopDialog = ({ open, stops, onClose }: StopDialogProps) => {
     }
   }, [stopList, stops]);
 
+  const handleClickLocation = useCallback(() => {
+    try {
+      const { lat, lng } = stopList[stops[0][1]]?.location;
+      window.open(`https://www.google.com/maps/?q=${lat},${lng}`, "_blank");
+    } catch (err) {
+      console.error(err);
+    }
+  }, [stopList, stops]);
+
   return (
     <Dialog open={open} onClose={onClose} sx={rootSx}>
       <DialogTitle sx={titleSx}>
@@ -66,6 +76,9 @@ const StopDialog = ({ open, stops, onClose }: StopDialogProps) => {
           <IconButton onClick={handleClickDirection}>
             <DirectionsIcon />
           </IconButton>
+          <IconButton onClick={handleClickLocation}>
+            <MapIcon />
+          </IconButton>
         </Box>
         <Box>
           <IconButton onClick={onClose}>