add the google map to let the buyer see what the products are close to them. and what the product far away.

index.html

@@ -101,10 +101,12 @@
             </div>
         </div>
     </section>
-
     <!-- Marketplace Section -->
     <section id="marketplace" class="py-16 px-4 bg-gray-800">
-        <div class="max-w-7xl mx-auto">
+        <div class="max-w-7xl mx-auto mb-10">
+            <div id="map" class="h-96 rounded-xl overflow-hidden shadow-lg"></div>
+        </div>
+<div class="max-w-7xl mx-auto">
             <div class="flex items-center justify-between mb-10">
                 <h2 class="text-3xl font-bold">
                     <span class="gradient-text">Etsy-style</span> Marketplace
@@ -269,10 +271,12 @@
             </div>
         </div>
     </section>
-
     <!-- Food Rescue Section -->
     <section id="food-rescue" class="py-16 px-4 bg-gray-900">
-        <div class="max-w-7xl mx-auto">
+        <div class="max-w-7xl mx-auto mb-10">
+            <div id="foodMap" class="h-96 rounded-xl overflow-hidden shadow-lg"></div>
+        </div>
+<div class="max-w-7xl mx-auto">
             <div class="flex items-center justify-between mb-10">
                 <h2 class="text-3xl font-bold">
                     <span class="gradient-text">Too Good To Go</span> Style Food Rescue
@@ -629,9 +633,184 @@
             </div>
         </div>
     </section>
-    <!-- Add Live Stream Script -->
+    <!-- Add Google Maps and Live Stream Script -->
+    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMaps" async defer></script>
     <script>
-        // Live stream chat functionality
+        // Initialize Maps
+        function initMaps() {
+            // Marketplace Map
+            const marketplaceMap = new google.maps.Map(document.getElementById("map"), {
+                center: { lat: 40.7128, lng: -74.0060 }, // Default to NYC
+                zoom: 12,
+                styles: [
+                    { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
+                    { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
+                    { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
+                ]
+            });
+
+            // Food Rescue Map
+            const foodMap = new google.maps.Map(document.getElementById("foodMap"), {
+                center: { lat: 40.7128, lng: -74.0060 }, // Default to NYC
+                zoom: 12,
+                styles: [
+                    { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
+                    { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
+                    { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
+                ]
+            });
+
+            // Sample markers for marketplace products
+            const marketplaceMarkers = [
+                {
+                    position: { lat: 40.7128, lng: -74.0060 },
+                    title: "Handwoven Macrame Wall Hanging",
+                    price: "$45",
+                    image: "http://static.photos/craft/200x200/1"
+                },
+                {
+                    position: { lat: 40.7145, lng: -74.0082 },
+                    title: "Hand-thrown Ceramic Mug Set",
+                    price: "$28",
+                    image: "http://static.photos/craft/200x200/2"
+                },
+                {
+                    position: { lat: 40.7200, lng: -73.9900 },
+                    title: "Hand-stitched Leather Wallet",
+                    price: "$75",
+                    image: "http://static.photos/craft/200x200/3"
+                }
+            ];
+
+            // Sample markers for food rescue
+            const foodMarkers = [
+                {
+                    position: { lat: 40.7150, lng: -74.0020 },
+                    title: "Fresh Bakery Surprise Bag",
+                    price: "$3.99",
+                    image: "http://static.photos/food/200x200/1" 
+                },
+                {
+                    position: { lat: 40.7180, lng: -73.9990 },
+                    title: "Vegetarian Lunch Box", 
+                    price: "$4.80",
+                    image: "http://static.photos/food/200x200/2"
+                }
+            ];
+
+            // Add marketplace markers
+            marketplaceMarkers.forEach(markerInfo => {
+                const marker = new google.maps.Marker({
+                    position: markerInfo.position,
+                    map: marketplaceMap,
+                    title: markerInfo.title,
+                    icon: {
+                        url: markerInfo.image,
+                        scaledSize: new google.maps.Size(40, 40),
+                        origin: new google.maps.Point(0, 0),
+                        anchor: new google.maps.Point(20, 20)
+                    }
+                });
+
+                const infowindow = new google.maps.InfoWindow({
+                    content: `<div class="text-gray-900">
+                        <img src="${markerInfo.image}" class="w-16 h-16 object-cover mb-2">
+                        <h4 class="font-bold">${markerInfo.title}</h4>
+                        <p>Price: ${markerInfo.price}</p>
+                        <a href="#marketplace" class="text-primary-500 hover:underline">View Product</a>
+                    </div>`
+                });
+
+                marker.addListener("click", () => {
+                    infowindow.open(marketplaceMap, marker);
+                });
+            });
+
+            // Add food rescue markers
+            foodMarkers.forEach(markerInfo => {
+                const marker = new google.maps.Marker({
+                    position: markerInfo.position,
+                    map: foodMap,
+                    title: markerInfo.title,
+                    icon: {
+                        url: markerInfo.image,
+                        scaledSize: new google.maps.Size(40, 40),
+                        origin: new google.maps.Point(0, 0),
+                        anchor: new google.maps.Point(20, 20)
+                    }
+                });
+
+                const infowindow = new google.maps.InfoWindow({
+                    content: `<div class="text-gray-900">
+                        <img src="${markerInfo.image}" class="w-16 h-16 object-cover mb-2">
+                        <h4 class="font-bold">${markerInfo.title}</h4>
+                        <p>Price: ${markerInfo.price}</p>
+                        <a href="#food-rescue" class="text-primary-500 hover:underline">View Offer</a>
+                    </div>`
+                });
+
+                marker.addListener("click", () => {
+                    infowindow.open(foodMap, marker);
+                });
+            });
+
+            // Try HTML5 geolocation to center map on user
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(
+                    (position) => {
+                        const userPos = {
+                            lat: position.coords.latitude,
+                            lng: position.coords.longitude
+                        };
+                        
+                        // Center both maps on user location
+                        marketplaceMap.setCenter(userPos);
+                        foodMap.setCenter(userPos);
+                        
+                        // Add user marker
+                        new google.maps.Marker({
+                            position: userPos,
+                            map: marketplaceMap,
+                            title: "Your Location",
+                            icon: {
+                                path: google.maps.SymbolPath.CIRCLE,
+                                scale: 8,
+                                fillColor: "#d946ef",
+                                fillOpacity: 1,
+                                strokeColor: "#fff",
+                                strokeWeight: 2
+                            }
+                        });
+                        
+                        new google.maps.Marker({
+                            position: userPos,
+                            map: foodMap,
+                            title: "Your Location", 
+                            icon: {
+                                path: google.maps.SymbolPath.CIRCLE,
+                                scale: 8,
+                                fillColor: "#d946ef",
+                                fillOpacity: 1,
+                                strokeColor: "#fff",
+                                strokeWeight: 2
+                            }
+                        });
+                    },
+                    () => {
+                        // Default to NYC if geolocation fails
+                        marketplaceMap.setCenter({ lat: 40.7128, lng: -74.0060 });
+                        foodMap.setCenter({ lat: 40.7128, lng: -74.0060 });
+                    }
+                );
+            } else {
+                // Browser doesn't support Geolocation
+                marketplaceMap.setCenter({ lat: 40.7128, lng: -74.0060 });
+                foodMap.setCenter({ lat: 40.7128, lng: -74.0060 });
+            }
+        }
+
+        // Initialize feather icons
+// Live stream chat functionality
         const chatMessages = document.getElementById('chatMessages');
         const chatInput = document.querySelector('#chatMessages + div input');
         const chatSendBtn = document.querySelector('#chatMessages + div button');