fix(examples): add cleanup function for drawing manager

mrMetalWood · Mar 13, 2024 · 8e77b25 · 8e77b25
1 parent 089ae0a
commit 8e77b25
Showing 1 changed file with 40 additions and 36 deletions.
diff --git a/examples/drawing/src/use-drawing-manager.tsx b/examples/drawing/src/use-drawing-manager.tsx
@@ -13,42 +13,46 @@ export function useDrawingManager(
   useEffect(() => {
     if (!map || !drawing) return;
 
-    setDrawingManager(
-      // https://developers.google.com/maps/documentation/javascript/reference/drawing
-      new drawing.DrawingManager({
-        map,
-        drawingMode: google.maps.drawing.OverlayType.CIRCLE,
-        drawingControl: true,
-        drawingControlOptions: {
-          position: google.maps.ControlPosition.TOP_CENTER,
-          drawingModes: [
-            google.maps.drawing.OverlayType.MARKER,
-            google.maps.drawing.OverlayType.CIRCLE,
-            google.maps.drawing.OverlayType.POLYGON,
-            google.maps.drawing.OverlayType.POLYLINE,
-            google.maps.drawing.OverlayType.RECTANGLE
-          ]
-        },
-        markerOptions: {
-          draggable: true
-        },
-        circleOptions: {
-          editable: true
-        },
-        polygonOptions: {
-          editable: true,
-          draggable: true
-        },
-        rectangleOptions: {
-          editable: true,
-          draggable: true
-        },
-        polylineOptions: {
-          editable: true,
-          draggable: true
-        }
-      })
-    );
+    // https://developers.google.com/maps/documentation/javascript/reference/drawing
+    const newDrawingManager = new drawing.DrawingManager({
+      map,
+      drawingMode: google.maps.drawing.OverlayType.CIRCLE,
+      drawingControl: true,
+      drawingControlOptions: {
+        position: google.maps.ControlPosition.TOP_CENTER,
+        drawingModes: [
+          google.maps.drawing.OverlayType.MARKER,
+          google.maps.drawing.OverlayType.CIRCLE,
+          google.maps.drawing.OverlayType.POLYGON,
+          google.maps.drawing.OverlayType.POLYLINE,
+          google.maps.drawing.OverlayType.RECTANGLE
+        ]
+      },
+      markerOptions: {
+        draggable: true
+      },
+      circleOptions: {
+        editable: true
+      },
+      polygonOptions: {
+        editable: true,
+        draggable: true
+      },
+      rectangleOptions: {
+        editable: true,
+        draggable: true
+      },
+      polylineOptions: {
+        editable: true,
+        draggable: true
+      }
+    });
+
+    setDrawingManager(newDrawingManager);
+
+    return () => {
+      newDrawingManager.setMap(null);
+    };
   }, [drawing, map]);
 
   return drawingManager;