add starter PoolMap

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}

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>
+	);
 }