fix the error for google map, if not working please use other map like petal map

index.html

@@ -103,53 +103,43 @@
     </section>
 
     <script>
-        // Initialize Food Map
         function initFoodMap() {
             if (navigator.geolocation) {
                 navigator.geolocation.getCurrentPosition(function(position) {
-                    const userLatLng = {
-                        lat: position.coords.latitude,
-                        lng: position.coords.longitude
-                    };
-
-                    const map = new google.maps.Map(document.getElementById("foodMap"), {
-                        center: userLatLng,
+                    const userPosition = [position.coords.longitude, position.coords.latitude];
+                    
+                    const map = new AMap.Map("foodMap", {
+                        viewMode: "3D",
                         zoom: 12,
-                        styles: [
-                            { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
-                            { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
-                            { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] }
-                        ]
+                        center: userPosition,
+                        mapStyle: "amap://styles/dark"
                     });
-
                     // Add user location marker
-                    new google.maps.Marker({
-                        position: userLatLng,
+                    new AMap.Marker({
+                        position: userPosition,
                         map: map,
                         title: "Your Location",
-                        icon: {
-                            url: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png"
-                        }
+                        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"
                     });
 
                     // Sample food rescue locations
                     const foodLocations = [
                         {
-                            position: { lat: userLatLng.lat + 0.008, lng: userLatLng.lng + 0.008 },
+                            position: [userPosition[0] + 0.008, userPosition[1] + 0.008],
                             title: "Bakery Delight",
                             offer: "Bread Surprise Bag",
                             price: "$3.99",
                             distance: "0.3 mi"
                         },
                         {
-                            position: { lat: userLatLng.lat + 0.015, lng: userLatLng.lng - 0.01 },
+                            position: [userPosition[0] + 0.015, userPosition[1] - 0.01],
                             title: "GreenEats",
                             offer: "Vegetarian Lunch Box",
                             price: "$4.80",
                             distance: "0.7 mi"
                         },
                         {
-                            position: { lat: userLatLng.lat - 0.02, lng: userLatLng.lng - 0.015 },
+                            position: [userPosition[0] - 0.02, userPosition[1] - 0.015],
                             title: "Ocean Bites",
                             offer: "Sushi Surprise Pack",
                             price: "$6.00",
@@ -159,92 +149,78 @@
 
                     // Add food location markers
                     foodLocations.forEach(location => {
-                        const marker = new google.maps.Marker({
+                        const marker = new AMap.Marker({
                             position: location.position,
                             map: map,
                             title: location.title,
-                            icon: {
-                                url: "https://maps.google.com/mapfiles/ms/icons/red-dot.png"
-                            }
+                            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
                         });
 
-                        const infoWindow = new google.maps.InfoWindow({
+                        const infoWindow = new AMap.InfoWindow({
                             content: `
-                                <div class="text-gray-800">
+                                <div class="text-gray-800 p-2">
                                     <h3 class="font-bold">${location.title}</h3>
                                     <p>Offer: ${location.offer}</p>
                                     <p>Price: ${location.price}</p>
                                     <p>Distance: ${location.distance}</p>
                                 </div>
-                            `
+                            `,
+                            offset: new AMap.Pixel(0, -30)
                         });
 
-                        marker.addListener("click", () => {
-                            infoWindow.open(map, marker);
+                        marker.on('click', () => {
+                            infoWindow.open(map, marker.getPosition());
                         });
                     });
-                });
+});
             }
         }
-
-        // Call initFoodMap when page loads
-        document.addEventListener('DOMContentLoaded', function() {
+        // Initialize both maps
+        function initMaps() {
             initMap();
             initFoodMap();
-        });
-    </script>
-<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
-    <script>
-        // Initialize Google Map
+        }
+
+        document.addEventListener('DOMContentLoaded', initMaps);
+</script>
+<script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_PETAL_MAP_KEY"></script>
+<script>
+        // Initialize Petal Map
         function initMap() {
             if (navigator.geolocation) {
                 navigator.geolocation.getCurrentPosition(function(position) {
-                    const userLatLng = {
-                        lat: position.coords.latitude,
-                        lng: position.coords.longitude
-                    };
-
-                    const map = new google.maps.Map(document.getElementById("productsMap"), {
-                        center: userLatLng,
+                    const userPosition = [position.coords.longitude, position.coords.latitude];
+                    
+                    const map = new AMap.Map("productsMap", {
+                        viewMode: "3D",
                         zoom: 12,
-                        styles: [
-                            { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
-                            { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
-                            { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
-                            {
-                                featureType: "poi",
-                                elementType: "labels.text.fill",
-                                stylers: [{ color: "#d59563" }]
-                            }
-                        ]
+                        center: userPosition,
+                        mapStyle: "amap://styles/dark"
                     });
-
                     // Add user location marker
-                    new google.maps.Marker({
-                        position: userLatLng,
+                    new AMap.Marker({
+                        position: userPosition,
                         map: map,
                         title: "Your Location",
-                        icon: {
-                            url: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png"
-                        }
+                        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"
                     });
 
-                    // Sample product locations (in a real app, these would come from your database)
+                    // Sample product locations
                     const products = [
                         {
-                            position: { lat: userLatLng.lat + 0.01, lng: userLatLng.lng + 0.01 },
+                            position: [userPosition[0] + 0.01, userPosition[1] + 0.01],
                             title: "Handwoven Macrame",
                             price: "$45",
                             distance: "0.5 mi"
                         },
                         {
-                            position: { lat: userLatLng.lat + 0.02, lng: userLatLng.lng - 0.01 },
+                            position: [userPosition[0] + 0.02, userPosition[1] - 0.01],
                             title: "Ceramic Mug Set",
                             price: "$28",
                             distance: "1.2 mi"
                         },
                         {
-                            position: { lat: userLatLng.lat - 0.03, lng: userLatLng.lng - 0.02 },
+                            position: [userPosition[0] - 0.03, userPosition[1] - 0.02],
                             title: "Leather Wallet",
                             price: "$75",
                             distance: "2.5 mi"
@@ -253,30 +229,29 @@
 
                     // Add product markers
                     products.forEach(product => {
-                        const marker = new google.maps.Marker({
+                        const marker = new AMap.Marker({
                             position: product.position,
                             map: map,
                             title: product.title,
-                            icon: {
-                                url: "https://maps.google.com/mapfiles/ms/icons/green-dot.png"
-                            }
+                            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
                         });
 
-                        const infoWindow = new google.maps.InfoWindow({
+                        const infoWindow = new AMap.InfoWindow({
                             content: `
-                                <div class="text-gray-800">
+                                <div class="text-gray-800 p-2">
                                     <h3 class="font-bold">${product.title}</h3>
                                     <p>Price: ${product.price}</p>
                                     <p>Distance: ${product.distance}</p>
                                 </div>
-                            `
+                            `,
+                            offset: new AMap.Pixel(0, -30)
                         });
 
-                        marker.addListener("click", () => {
-                            infoWindow.open(map, marker);
+                        marker.on('click', () => {
+                            infoWindow.open(map, marker.getPosition());
                         });
                     });
-                });
+});
             }
         }
 
@@ -967,13 +942,9 @@ const chatMessages = document.getElementById('chatMessages');
             script.defer = true;
             document.head.appendChild(script);
         }
-
-        // Load maps when page is ready
-        if (document.readyState === 'complete') {
-            loadGoogleMaps();
-        } else {
-            window.addEventListener('load', loadGoogleMaps);
-        }
+        // Initialize map when page loads
+        window.initMap = initMap;
+        document.addEventListener('DOMContentLoaded', initMap);
 // Cart functionality
         let cart = JSON.parse(localStorage.getItem('cart')) || [];