Add map component to assignment profile page

frontend/front/src/pages/Admin/assignment/AssignProfile.js

@@ -7,7 +7,7 @@ import {
   useGoToBreadcrumb,
   useInitBreadcrumbs,
 } from "../../../hooks/breadcrumbHooks";
-
+import { AssignmentsMap } from "../component/AssignmentsMap";
 import ContainerTitle from "../component/ContainerTitle";
 import CustomSnackbar from "../../../components/CustomSnackbar";
 import { DataGrid } from "@mui/x-data-grid";
@@ -134,6 +134,7 @@ const AssignProfile = () => {
         />
       ) : (
         <Box>
+          <AssignmentsMap />
           <Stack
             py={3}
             justifyContent="flex-start"

frontend/front/src/pages/Admin/component/AssignmentsMap.js

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import { Button } from "@mui/material";
+
+export const AssignmentsMap = () => {
+  const [mapVisible, setMapVisible] = useState(false);
+  return (
+    <>
+      {mapVisible ? (
+        <div>
+          <iframe
+            src="https://www.google.com/maps/d/u/1/embed?mid=1w7GltFfO52CSl460ju2tkSUUVOXgL9g&ehbc=2E312F&z=13&noprof=1"
+            width="640"
+            height="480"
+            title="BostonHPA Surveying Clusters"
+          ></iframe>
+          <div style={{ paddingBlock: "1rem" }}>
+            <Button variant="contained" onClick={() => setMapVisible(false)}>
+              Close Map
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <Button variant="contained" onClick={() => setMapVisible(true)}>
+          Show Assignments Map
+        </Button>
+      )}
+    </>
+  );
+};