add: Form create load

src/components/directionsRender.js

@@ -0,0 +1,38 @@
+export default function useDirectionRender() {
+
+    defineProps({
+        origin: { type: Object },
+        destination: { type: Object },
+        travelMode: { type: String },
+    })
+
+    const directionsRenderer = ref(null);
+    const directionsService = new window.google.maps.DirectionsService();
+
+    onMounted(() => {
+      directionsRenderer.value = new window.google.maps.DirectionsRenderer();
+
+      watch(
+        () => [props.origin, props.destination, props.travelMode],
+        () => {
+          const { origin, destination, travelMode } = props;
+          if (!origin || !destination || !travelMode) return;
+
+          directionsService.route(
+            {
+              origin,
+              destination,
+              travelMode,
+            },
+            (response, status) => {
+              if (status !== 'OK') return;
+              directionsRenderer.value.setDirections(response);
+            }
+          );
+        },
+        { immediate: true }
+      );
+    });
+
+    return { directionsRenderer };
+}