Feature/ca google maps

client/src/components/GoogleMapsScriptLoader.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+
+const GOOGLE_API_KEY = import.meta.env.VITE_GOOGLE_API_KEY;
+
+interface GoogleMapsScriptLoaderProps {
+  onLoad: () => void;
+}
+
+const GoogleMapsScriptLoader: React.FC<GoogleMapsScriptLoaderProps> = ({ onLoad }) => {
+  useEffect(() => {
+    if (window.google) {
+      onLoad(); 
+      return;
+    }
+
+    if (document.getElementById("google-maps-script")) {
+      // If script already exists but not yet loaded, add onload
+      const script = document.getElementById("google-maps-script") as HTMLScriptElement;
+      script.onload = onLoad;
+      return;
+    }
+
+    const script = document.createElement("script");
+    script.id = "google-maps-script";
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&libraries=places`;
+    script.async = true;
+    script.defer = true;
+    script.onload = onLoad;
+    document.head.appendChild(script);
+  }, [onLoad]);
+
+  return null;
+};
+
+export default GoogleMapsScriptLoader;

client/src/components/TripDashboard.tsx

@@ -60,6 +60,9 @@ const TripDashboard: React.FC = () => {
     selectedVehicle === "All" ? true : trip.vehicle?.name === selectedVehicle
   );
 
+  //Google directions Start
+
+  //Google directions End
   return (
     <Card
       title={
@@ -245,7 +248,7 @@ const TripDashboard: React.FC = () => {
                     </div>
                   ))}
 
-                  <div className="pt-2">
+                  <div className="pt-2 flex justify-between">
                     <Button
                       onClick={() =>
                         deleteTrip({ variables: { _id: trip._id } })
@@ -254,6 +257,19 @@ const TripDashboard: React.FC = () => {
                     >
                       Delete
                     </Button>
+                    {/* Start of direction button */}
+                    <Button
+                      onClick={() => {
+                        const origin = encodeURIComponent(trip.startLocation);
+                        const destination = encodeURIComponent(trip.endLocation);
+                        const directionsUrl = `https://www.google.com/maps/dir/?api=1&origin=${origin}&destination=${destination}`;
+                        window.open(directionsUrl, "_blank");
+                      }}
+                      className="bg-green-600 hover:bg-green-700 text-sm px-3 py-1"
+                    >
+                      Directions
+                    </Button>
+                    {/* End of direction button */}
                   </div>
                 </li>
               );