Google maps integration

frontend/src/pages/CreateItem.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
 import api, { addressAPI, userAPI, itemAPI } from "../services/api";
@@ -83,6 +83,9 @@ const CreateItem: React.FC = () => {
   const [userAddresses, setUserAddresses] = useState<Address[]>([]);
   const [selectedAddressId, setSelectedAddressId] = useState<string>("");
   const [addressesLoading, setAddressesLoading] = useState(true);
+  
+  // Reference to LocationForm geocoding function
+  const geocodeLocationRef = useRef<(() => Promise<boolean>) | null>(null);
 
   useEffect(() => {
     fetchUserAddresses();
@@ -150,6 +153,15 @@ const CreateItem: React.FC = () => {
     setLoading(true);
     setError("");
 
+    // Try to geocode the address before submitting
+    if (geocodeLocationRef.current) {
+      try {
+        await geocodeLocationRef.current();
+      } catch (error) {
+        console.warn('Geocoding failed, creating item without coordinates:', error);
+      }
+    }
+
     try {
       // For now, we'll store image URLs as base64 strings
       // In production, you'd upload to a service like S3
@@ -253,6 +265,14 @@ const CreateItem: React.FC = () => {
     }
   };
 
+  const handleCoordinatesChange = (latitude: number, longitude: number) => {
+    setFormData((prev) => ({
+      ...prev,
+      latitude,
+      longitude,
+    }));
+  };
+
   const handleAddressSelect = (addressId: string) => {
     if (addressId === "new") {
       // Clear form for new address entry
@@ -379,6 +399,10 @@ const CreateItem: React.FC = () => {
               onChange={handleChange}
               onAddressSelect={handleAddressSelect}
               formatAddressDisplay={formatAddressDisplay}
+              onCoordinatesChange={handleCoordinatesChange}
+              onGeocodeRef={(geocodeFunction) => {
+                geocodeLocationRef.current = geocodeFunction;
+              }}
             />
 
             <DeliveryOptions