Fix location not snapping bug

components/home.js

@@ -49,6 +49,7 @@ import MerchModal from "@/components/merchModal";
 import clientConfig from "@/clientConfig";
 import { useGoogleLogin } from "@react-oauth/google";
 import LeagueModal from "./leagueModal";
+import haversineDistance from "./utils/haversineDistance";
 
 
 const initialMultiplayerState = {
@@ -1709,6 +1710,7 @@ setShowCountryButtons(false)
   const [showPanoOnResult, setShowPanoOnResult] = useState(false);
 
   useEffect(() => {
+    let intt=null;
     // const map =  new google.maps.Map(document.getElementById("map"), {
     //   center: fenway,
     //   zoom: 14,
@@ -1755,6 +1757,25 @@ setShowCountryButtons(false)
   } else {
 
     panoramaRef.current.setPosition({ lat: latLong.lat, lng: latLong.long });
+let setTime = Date.now();
+    function snapBack() {
+      const panoramaPos = panoramaRef.current.getPosition();
+      const distance = haversineDistance(panoramaPos.lat(), panoramaPos.lng(), latLong.lat, latLong.long);
+      console.log("distance", distance)
+      if(distance > 10) {
+        panoramaRef.current.setPosition({ lat: latLong.lat, lng: latLong.long });
+      }
+    }
+    intt=setInterval(() => {
+      if(Date.now() - setTime > 3000) {
+        console.log("clearing interval")
+        return clearInterval(intt);
+      }
+      // if too far from latLong, reset to latLong
+      snapBack();
+    }, 200)
+
+
 
     window.reloadLoc = () => {
       panoramaRef.current.setPosition({ lat: latLong.lat, lng: latLong.long });
@@ -1809,6 +1830,7 @@ setShowCountryButtons(false)
 
 
     return () => {
+      if(intt) clearInterval(intt);
       if(!panoramaRef.current) return;
       google.maps.event.clearListeners(panoramaRef.current, 'pano_changed');
     }

components/utils/haversineDistance.js

@@ -0,0 +1,16 @@
+export default function haversineDistance(lat1, lon1, lat2, lon2) {
+  const R = 6371; // Earth's radius in kilometers
+  const toRadians = (degrees) => degrees * (Math.PI / 180);
+
+  const dLat = toRadians(lat2 - lat1);
+  const dLon = toRadians(lon2 - lon1);
+
+  const a =
+      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+      Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) *
+      Math.sin(dLon / 2) * Math.sin(dLon / 2);
+
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+  return R * c; // Distance in kilometers
+}