request elevation from google.maps in requestAndSetElevation function

create new function setMarkerPositionAndElevation
3DStreet · Jun 6, 2024 · 43a122c · 43a122c
1 parent ff551ce
commit 43a122c
Showing 1 changed file with 31 additions and 15 deletions.
diff --git a/src/editor/components/modals/GeoModal/GeoModal.component.jsx b/src/editor/components/modals/GeoModal/GeoModal.component.jsx
@@ -48,24 +48,41 @@ const GeoModal = ({ isOpen, onClose }) => {
     }
   }, [isOpen]);
 
+  const requestAndSetElevation = (lat, lng) => {
+    // request and set elevation for location with coordinates: lat, lng
+    const elevationService = new window.google.maps.ElevationService();
+    elevationService.getElevationForLocations(
+      {
+        locations: [{ lat, lng }]
+      },
+      (results, status) => {
+        if (status === 'OK' && results[0]) {
+          setElevation(results[0].elevation.toFixed(2));
+        }
+      }
+    );
+  };
+
+  const setMarkerPositionAndElevation = useCallback((lat, lng) => {
+    if (!isNaN(lat) && !isNaN(lng)) {
+      setMarkerPosition({
+        lat: roundCoord(lat),
+        lng: roundCoord(lng)
+      });
+      requestAndSetElevation(lat, lng);
+    }
+  }, []);
+
   const onMapClick = useCallback((event) => {
-    setMarkerPosition({
-      lat: roundCoord(event.latLng.lat()),
-      lng: roundCoord(event.latLng.lng())
-    });
+    setMarkerPositionAndElevation(event.latLng.lat(), event.latLng.lng());
   }, []);
 
   const handleCoordinateChange = (value) => {
     const [newLat, newLng] = value
       .split(',')
       .map((coord) => parseFloat(coord.trim()));
 
-    if (!isNaN(newLat) && !isNaN(newLng)) {
-      setMarkerPosition({
-        lat: roundCoord(newLat),
-        lng: roundCoord(newLng)
-      });
-    }
+    setMarkerPositionAndElevation(newLat, newLng);
   };
 
   const handleElevationChange = (value) => {
@@ -81,11 +98,10 @@ const GeoModal = ({ isOpen, onClose }) => {
     if (autocomplete !== null) {
       const place = autocomplete.getPlace();
       if (place && place.geometry) {
-        const location = {
-          lat: place.geometry.location.lat(),
-          lng: place.geometry.location.lng()
-        };
-        setMarkerPosition(location);
+        setMarkerPositionAndElevation(
+          place.geometry.location.lat(),
+          place.geometry.location.lng()
+        );
       }
     } else {
       console.log('Autocomplete is not loaded yet!');