diff --git a/frontend/components/google-map-with-drawing.tsx b/frontend/components/google-map-with-drawing.tsx
index 5362123..31c2fe0 100644
--- a/frontend/components/google-map-with-drawing.tsx
+++ b/frontend/components/google-map-with-drawing.tsx
@@ -13,14 +13,76 @@ const center = { lat: 13.7563, lng: 100.5018 }; // Example: Bangkok, Thailand
 const GoogleMapWithDrawing = () => {
   const [map, setMap] = useState<google.maps.Map | null>(null);
 
-  // Handles drawing complete
-  const onDrawingComplete = useCallback((overlay: google.maps.drawing.OverlayCompleteEvent) => {
-    console.log("Drawing complete:", overlay);
-  }, []);
+  // handles drawing complete
+  const onDrawingComplete = useCallback(
+    (overlay: google.maps.drawing.OverlayCompleteEvent) => {
+      console.log("Drawing complete:", overlay);
+
+      const shape = overlay.overlay;
+
+      // check the shape of the drawing
+      if (shape instanceof google.maps.Polygon) {
+        console.log("Polygon detected:", shape);
+        const path = shape.getPath();
+        const coordinates = path.getArray().map((latLng) => ({
+          lat: latLng.lat(),
+          lng: latLng.lng(),
+        }));
+        console.log("Polygon coordinates:", coordinates);
+      } else if (shape instanceof google.maps.Rectangle) {
+        console.log("Rectangle detected:", shape);
+        const bounds = shape.getBounds();
+        if (bounds) {
+          const northEast = bounds.getNorthEast();
+          const southWest = bounds.getSouthWest();
+          console.log("Rectangle coordinates:", {
+            northEast: { lat: northEast.lat(), lng: northEast.lng() },
+            southWest: { lat: southWest.lat(), lng: southWest.lng() },
+          });
+        } else {
+          console.log("Bounds are null, rectangle not fully drawn yet.");
+        }
+      } else if (shape instanceof google.maps.Circle) {
+        console.log("Circle detected:", shape);
+        const center = shape.getCenter();
+        const radius = shape.getRadius();
+        if (center) {
+          console.log("Circle center:", {
+            lat: center.lat(),
+            lng: center.lng(),
+            radius: radius, // circle's radius in meters
+          });
+        } else {
+          console.log("Circle center is null.");
+        }
+      } else if (shape instanceof google.maps.Polyline) {
+        console.log("Polyline detected:", shape);
+        const path = shape.getPath();
+        const coordinates = path.getArray().map((latLng) => ({
+          lat: latLng.lat(),
+          lng: latLng.lng(),
+        }));
+        console.log("Polyline coordinates:", coordinates);
+      }
+      // in case of unrecognized shape types
+      else {
+        console.log("Unknown shape detected:", shape);
+      }
+    },
+    []
+  );
 
   return (
-    <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!} libraries={["drawing"]}>
-      <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10} onLoad={(map) => setMap(map)}>
+    <LoadScript
+      googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!}
+      libraries={["drawing"]}
+    >
+      <GoogleMap
+        mapContainerStyle={containerStyle}
+        center={center}
+        zoom={10}
+        onLoad={(map) => setMap(map)}
+      >
         {map && (
           <DrawingManager
             onOverlayComplete={onDrawingComplete}