update PoolMap.tsx

src/components/Pool.tsx

@@ -200,7 +200,7 @@ export default function Pool({
 						</Button>
 					)}
 					<hr />
-					<PoolMap pool={pool._id} />
+					<PoolMap pool={pool} />
 					<hr />
 					<Textarea
 						cols={80}

src/components/PoolMap.tsx

@@ -1,30 +1,39 @@
 import GoogleMapReact from 'google-map-react';
+import { useCallback } from 'react';
 import { makeAPIGetCall } from '../api/utils';
 
 const position = { lat: 38.817, lng: -77.1679 };
 
-export default function PoolMap(pool: any) {
+export type AddressMarker = {
-	const renderMarkers = (map: any, maps: any) => {
+	user: string;
+	pool: string;
+	location: string;
+	lat: string;
+	lng: string;
+};
+
+export default function PoolMap({ pool }: { pool: Carpool.Pool }) {
+	const renderMarkers = useCallback(
+		(map: any, maps: any) => {
 			let markers: any[] = [];
-		makeAPIGetCall(`/addresses/pool/${pool.pool}`).then((res) => {
+			makeAPIGetCall(`/addresses/pool/${pool._id}`).then((res) => {
 				if (res.data.data) {
-				res.data.data.forEach((element: any) => {
+					res.data.data.forEach((element: AddressMarker) => {
 						let marker = new maps.Marker({
 							position: {
 								lat: parseFloat(element.lat),
 								lng: parseFloat(element.lng),
 							},
 							map,
-						title: 'Hello World!',
+							title: 'Anonymous Address',
 						});
 						markers.push(marker);
 					});
 				}
 			});
-
+		},
-		console.log(markers);
+		[pool._id]
-		return markers;
+	);
-	};
 
 	return (
 		<div style={{ height: '50vh', width: '100%' }}>
@@ -36,7 +45,7 @@ export default function PoolMap(pool: any) {
 				defaultZoom={11}
 				yesIWantToUseGoogleMapApiInternals
 				onGoogleApiLoaded={({ map, maps }: any) => renderMarkers(map, maps)}
-			></GoogleMapReact>
+			/>
 		</div>
 	);
 }