Adding args to useMap to set the initial position and zoom

client/src/components/screens/RoundSummary/RoundSummary.jsx

@@ -12,7 +12,7 @@ export default ({ gameId, round, onNext }) => {
     totalScore,
   } = round;
   const mapDivRef = useRef(null);
-  const mapRef = useMap(mapDivRef);
+  const mapRef = useMap(mapDivRef, targetPoint.lat, targetPoint.lng, 4);
   useMarkedPoints(mapRef, selectedPoint, targetPoint);
 
   return (

client/src/components/screens/RoundSummary/useMarkedPoints.jsx

@@ -51,9 +51,6 @@ const makeMarker = (map, position, title, icon) => {
 
 export default (mapRef, selectedPoint, targetPoint) => {
   useEffect(() => {
-    mapRef.current.panTo(targetPoint);
-    mapRef.current.setZoom(4);
-
     const selectedMarker = makeMarker(mapRef.current, selectedPoint, "Selected", questionIcon);
     const targetMarker = makeMarker(mapRef.current, targetPoint, "Goal", flagIcon);
 

client/src/hooks/useMap.jsx

@@ -1,7 +1,7 @@
 import { useRef, useEffect } from "react";
 /* global google */
 
-export default mapDiv => {
+export default (mapDiv, lat=25, lng=-25, zoom=0) => {
   const map = useRef(null);
   useEffect(() => {
     if (map.current) {
@@ -10,12 +10,12 @@ export default mapDiv => {
     }
     
     map.current = new google.maps.Map(mapDiv.current, {
-      center: { lat: 25, lng: -25 },
-      zoom: 0,
+      center: { lat, lng },
+      zoom,
       disableDefaultUI: true,
       fullscreenControl: true,
     });
-  }, [mapDiv]);
+  }, [mapDiv, lat, lng, zoom]);
 
   return map;
 }