Merge branch 'main' into issue-07

my-app/package.json

@@ -9,8 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@googlemaps/js-api-loader": "^1.16.2",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
+    "@react-google-maps/api": "^2.19.2",
     "autoprefixer": "10.4.14",
     "bcryptjs": "^2.4.3",
     "eslint": "8.46.0",
@@ -21,11 +23,14 @@
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.46.2",
     "swr": "^2.2.4",
-    "tailwindcss": "3.3.3"
+    "tailwindcss": "3.3.3",
+    "use-places-autocomplete": "^4.0.1"
   },
   "devDependencies": {
+    "daisyui": "^3.9.3",
     "eslint-plugin-unused-imports": "^3.0.0"
   }
 }

my-app/src/components/Map.jsx

@@ -0,0 +1,83 @@
+import { useEffect } from "react";
+
+const GoogleMap = () => {
+  useEffect(() => {
+    const initAutocomplete = () => {
+      const map = new google.maps.Map(document.getElementById("map"), {
+        center: { lat: -33.8688, lng: 151.2195 },
+        zoom: 13,
+        mapTypeId: "roadmap",
+      });
+
+      const input = document.getElementById("pac-input");
+      const searchBox = new google.maps.places.SearchBox(input);
+
+      //   map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
+
+      map.addListener("bounds_changed", () => {
+        searchBox.setBounds(map.getBounds());
+      });
+
+      let markers = [];
+
+      searchBox.addListener("places_changed", () => {
+        const places = searchBox.getPlaces();
+
+        if (places.length === 0) {
+          return;
+        }
+
+        markers.forEach((marker) => {
+          marker.setMap(null);
+        });
+        markers = [];
+
+        const bounds = new google.maps.LatLngBounds();
+
+        places.forEach((place) => {
+          if (!place.geometry || !place.geometry.location) {
+            console.log("Returned place contains no geometry");
+            return;
+          }
+
+          const icon = {
+            url: place.icon,
+            size: new google.maps.Size(71, 71),
+            origin: new google.maps.Point(0, 0),
+            anchor: new google.maps.Point(17, 34),
+            scaledSize: new google.maps.Size(25, 25),
+          };
+
+          markers.push(
+            new google.maps.Marker({
+              map,
+              icon,
+              title: place.name,
+              position: place.geometry.location,
+            })
+          );
+
+          if (place.geometry.viewport) {
+            bounds.union(place.geometry.viewport);
+          } else {
+            bounds.extend(place.geometry.location);
+          }
+        });
+
+        map.fitBounds(bounds);
+      });
+    };
+
+    const googleMapScript = document.createElement("script");
+    googleMapScript.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&libraries=places`;
+    googleMapScript.async = true;
+    googleMapScript.defer = true;
+    googleMapScript.addEventListener("load", initAutocomplete);
+
+    document.head.appendChild(googleMapScript);
+  }, []);
+
+  return <div id="map" className="h-96 mt-4" />;
+};
+
+export default GoogleMap;