docs: extend directions example with draggable markers (#683)

---------

Co-authored-by: Andrew Dauphinais <[email protected]>

Author: adaup1

examples/directions/README.md

@@ -6,6 +6,8 @@ This is an example which shows how to use `useMapsLibrary` to load the `routes`
 
 It allows the user to choose alternative routes, updating the route being rendered on the map.
 
+Users can also drag the markers around the map to change the route. The route is updated in real-time.
+
 ## Google Maps Platform API Key
 
 This example does not come with an API key. Running the examples locally requires a valid API key for the Google Maps Platform.

examples/directions/src/app.tsx

@@ -39,9 +39,32 @@ function Directions() {
   useEffect(() => {
     if (!routesLibrary || !map) return;
     setDirectionsService(new routesLibrary.DirectionsService());
-    setDirectionsRenderer(new routesLibrary.DirectionsRenderer({map}));
+    setDirectionsRenderer(
+      new routesLibrary.DirectionsRenderer({
+        draggable: true, // Only necessary for draggable markers
+        map
+      })
+    );
   }, [routesLibrary, map]);
 
+  // Add the following useEffect to make markers draggable
+  useEffect(() => {
+    if (!directionsRenderer) return;
+
+    // Add the listener to update routes when directions change
+    const listener = directionsRenderer.addListener(
+      'directions_changed',
+      () => {
+        const result = directionsRenderer.getDirections();
+        if (result) {
+          setRoutes(result.routes);
+        }
+      }
+    );
+
+    return () => google.maps.event.removeListener(listener);
+  }, [directionsRenderer]);
+
   // Use directions service
   useEffect(() => {
     if (!directionsService || !directionsRenderer) return;