From 04e637683d46247665869f1d29a0268a19aa739f Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sat, 10 Apr 2021 23:51:36 -0400
Subject: [PATCH] add starter PoolMap

---
 src/components/Pool.tsx    |  3 +++
 src/components/PoolMap.tsx | 24 +++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/Pool.tsx b/src/components/Pool.tsx
index 05813cf..c2db0a1 100644
--- a/src/components/Pool.tsx
+++ b/src/components/Pool.tsx
@@ -7,6 +7,7 @@ import Typography from '@material-ui/core/Typography';
 import Comment from './Comment';
 import { makeAPIGetCall, makeAPIPostCall } from '../api/utils';
 import AuthenticationContext from './AuthenticationContext';
+import PoolMap from './PoolMap';
 
 // eslint-disable-next-line
 const SAMPLE_POOL = {
@@ -126,6 +127,8 @@ export default function Pool() {
 						</Button>
 					)}
 					<hr />
+					<PoolMap />
+					<hr />
 					<Textarea
 						cols={80}
 						ref={commentTextareaRef}
diff --git a/src/components/PoolMap.tsx b/src/components/PoolMap.tsx
index 516299f..73e9123 100644
--- a/src/components/PoolMap.tsx
+++ b/src/components/PoolMap.tsx
@@ -1,3 +1,25 @@
+import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
+import { GOOGLE_MAPS_API_KEY } from '../api/google';
+
+const center = {
+	lat: 0,
+	lng: -180,
+};
+
+const position = {
+	lat: 37.772,
+	lng: -122.214,
+};
+
 export default function PoolMap() {
-	//
+	return (
+		<LoadScript googleMapsApiKey={GOOGLE_MAPS_API_KEY}>
+			<GoogleMap
+				mapContainerStyle={{ width: '400px', height: '400px' }}
+				center={center}
+			>
+				<Marker position={position} />
+			</GoogleMap>
+		</LoadScript>
+	);
 }