From c7c3e3fd6f221447a0c81459a45c090aa0714334 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Mon, 28 Oct 2024 17:03:34 +0700
Subject: maps component

---
 src/lib/maps/components/PinPointMap.jsx | 163 ++++++++++++++++++++++++++++++++
 1 file changed, 163 insertions(+)
 create mode 100644 src/lib/maps/components/PinPointMap.jsx

(limited to 'src/lib/maps/components/PinPointMap.jsx')

diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
new file mode 100644
index 00000000..0781d8a8
--- /dev/null
+++ b/src/lib/maps/components/PinPointMap.jsx
@@ -0,0 +1,163 @@
+import React, { useState, useCallback, useRef } from 'react';
+import {
+  GoogleMap,
+  useJsApiLoader,
+  Marker,
+  Autocomplete,
+} from '@react-google-maps/api';
+import { useMaps } from '../stores/useMaps';
+import { LocateFixed, MapPinIcon } from 'lucide-react';
+import { Button } from '@chakra-ui/react';
+
+const containerStyle = {
+  width: '100%',
+  height: '400px',
+};
+
+const center = {
+  lat: -6.2, // Default latitude (Jakarta)
+  lng: 106.816666, // Default longitude (Jakarta)
+};
+
+const PinpointLocation = () => {
+  const { isLoaded } = useJsApiLoader({
+    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY, // Pastikan API key ada di .env.local
+    libraries: ['places'],
+  });
+
+  const { addressMaps, setAddressMaps, selectedPosition, setSelectedPosition } =
+    useMaps();
+
+  const [tempAddress, setTempAddress] = useState('');
+  const [tempPosition, setTempPosition] = useState(center);
+
+  const autocompleteRef = useRef(null);
+
+  const onMapClick = useCallback((event) => {
+    const lat = event.latLng.lat();
+    const lng = event.latLng.lng();
+    setTempPosition({ lat, lng });
+    getAddress(lat, lng);
+  }, []);
+
+  const handlePlaceSelect = () => {
+    const place = autocompleteRef.current.getPlace();
+    if (place && place.geometry) {
+      const lat = place.geometry.location.lat();
+      const lng = place.geometry.location.lng();
+      setTempPosition({ lat, lng });
+      setTempAddress(place.formatted_address);
+    }
+  };
+
+  const getAddress = async (lat, lng) => {
+    try {
+      const response = await fetch(
+        `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}`
+      );
+      const data = await response.json();
+      if (data.results[0]) {
+        setTempAddress(data.results[0].formatted_address);
+      }
+    } catch (error) {
+      console.error('Error fetching address:', error);
+    }
+  };
+
+  const handleUseCurrentLocation = () => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const lat = position.coords.latitude;
+          const lng = position.coords.longitude;
+          setTempPosition({ lat, lng });
+          getAddress(lat, lng);
+        },
+        (error) => {
+          console.error('Error getting current location:', error);
+        }
+      );
+    }
+  };
+
+  const handleSavePinpoint = (event) => {
+    event.preventDefault();
+    if(tempAddress === '') {
+      alert('Silahkan pilih lokasi terlebih dahulu');
+      return;
+    }
+    setSelectedPosition(tempPosition);
+    setAddressMaps(tempAddress);
+  };
+
+  return (
+    <div className='w-full'>
+      <h3>Tentukan Pinpoint Lokasi</h3>
+      <div style={{ marginBottom: '10px' }}>
+        {isLoaded ? (
+          <Autocomplete
+            onLoad={(ref) => (autocompleteRef.current = ref)}
+            onPlaceChanged={handlePlaceSelect}
+          >
+            <input
+              type='text'
+              placeholder='Cari Alamat...'
+              style={{ width: '100%', padding: '8px' }}
+            />
+          </Autocomplete>
+        ) : (
+          <p>Loading autocomplete...</p>
+        )}
+      </div>
+
+      <div>
+        {isLoaded ? (
+          <GoogleMap
+            mapContainerStyle={containerStyle}
+            center={tempPosition}
+            zoom={15}
+            onClick={onMapClick}
+          >
+            <Marker
+              position={tempPosition}
+              draggable={true}
+              onDragEnd={(e) => onMapClick(e)}
+              icon={{
+                url: 'https://maps.google.com/mapfiles/ms/icons/red-pushpin.png',
+                scaledSize: new window.google.maps.Size(40, 40),
+              }}
+            />
+          </GoogleMap>
+        ) : (
+          <p>Loading map...</p>
+        )}
+      </div>
+
+      <div style={{ marginTop: '20px' }}>
+        <Button
+          variant='solid'
+          onClick={handleUseCurrentLocation}
+        >
+          <LocateFixed class='h-6 w-6 text-gray-500 mr-2' /> Gunakan Lokasi Saat
+          ini
+        </Button>
+      </div>
+
+      <div style={{ marginTop: '10px' }}>
+        <p>PinPoint :</p>
+        <div className='flex gap-x-2 shadow-md rounded-sm text-gray-500 p-3 items-center'>
+          <MapPinIcon class='h-8 w-8 text-gray-500 mr-3' />
+          <label> {tempAddress}</label>
+        </div>
+      </div>
+
+      <div className='mt-6 flex justify-end'>
+        <button className='p-3 border border-red-500 bg-red-600 text-white font-semibold rounded-lg' onClick={handleSavePinpoint}>
+            Simpan Lokasi Ini
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default PinpointLocation;
-- 
cgit v1.2.3


From bc4fe87e012cc1b06572ca12f1a3b92f6d1757e0 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Thu, 31 Oct 2024 09:09:05 +0700
Subject: detail adress

---
 src/lib/maps/components/PinPointMap.jsx | 43 +++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 7 deletions(-)

(limited to 'src/lib/maps/components/PinPointMap.jsx')

diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
index 0781d8a8..1fa40036 100644
--- a/src/lib/maps/components/PinPointMap.jsx
+++ b/src/lib/maps/components/PinPointMap.jsx
@@ -8,6 +8,7 @@ import {
 import { useMaps } from '../stores/useMaps';
 import { LocateFixed, MapPinIcon } from 'lucide-react';
 import { Button } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
 
 const containerStyle = {
   width: '100%',
@@ -30,6 +31,7 @@ const PinpointLocation = () => {
 
   const [tempAddress, setTempAddress] = useState('');
   const [tempPosition, setTempPosition] = useState(center);
+  const { setValue } = useForm();
 
   const autocompleteRef = useRef(null);
 
@@ -50,6 +52,11 @@ const PinpointLocation = () => {
     }
   };
 
+  const getAddressComponent = (components, type) => {
+    const component = components.find((comp) => comp.types.includes(type));
+    return component ? component.long_name : '';
+  };
+
   const getAddress = async (lat, lng) => {
     try {
       const response = await fetch(
@@ -57,6 +64,28 @@ const PinpointLocation = () => {
       );
       const data = await response.json();
       if (data.results[0]) {
+        const addressComponents = data.results[0].address_components;
+        const details = {
+          province: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_1'
+          ),
+          district: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_2'
+          ),
+          subDistrict: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_3'
+          ),
+          village: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_4'
+          ),
+          postalCode: getAddressComponent(addressComponents, 'postal_code'),
+        };
+        setValue('state', details?.province);
+        console.log(details);
         setTempAddress(data.results[0].formatted_address);
       }
     } catch (error) {
@@ -82,7 +111,7 @@ const PinpointLocation = () => {
 
   const handleSavePinpoint = (event) => {
     event.preventDefault();
-    if(tempAddress === '') {
+    if (tempAddress === '') {
       alert('Silahkan pilih lokasi terlebih dahulu');
       return;
     }
@@ -134,10 +163,7 @@ const PinpointLocation = () => {
       </div>
 
       <div style={{ marginTop: '20px' }}>
-        <Button
-          variant='solid'
-          onClick={handleUseCurrentLocation}
-        >
+        <Button variant='solid' onClick={handleUseCurrentLocation}>
           <LocateFixed class='h-6 w-6 text-gray-500 mr-2' /> Gunakan Lokasi Saat
           ini
         </Button>
@@ -152,8 +178,11 @@ const PinpointLocation = () => {
       </div>
 
       <div className='mt-6 flex justify-end'>
-        <button className='p-3 border border-red-500 bg-red-600 text-white font-semibold rounded-lg' onClick={handleSavePinpoint}>
-            Simpan Lokasi Ini
+        <button
+          className='p-3 border border-red-500 bg-red-600 text-white font-semibold rounded-lg'
+          onClick={handleSavePinpoint}
+        >
+          Simpan Lokasi Ini
         </button>
       </div>
     </div>
-- 
cgit v1.2.3


From 053c801a8c43688c2c4eec6800368898a81bfc39 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Thu, 31 Oct 2024 16:55:07 +0700
Subject: integrasi google maps service

---
 src/lib/maps/components/PinPointMap.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/lib/maps/components/PinPointMap.jsx')

diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
index 1fa40036..201fdeb4 100644
--- a/src/lib/maps/components/PinPointMap.jsx
+++ b/src/lib/maps/components/PinPointMap.jsx
@@ -26,7 +26,7 @@ const PinpointLocation = () => {
     libraries: ['places'],
   });
 
-  const { addressMaps, setAddressMaps, selectedPosition, setSelectedPosition } =
+  const { addressMaps, setAddressMaps, selectedPosition, setSelectedPosition, setDetailAddress } =
     useMaps();
 
   const [tempAddress, setTempAddress] = useState('');
@@ -84,7 +84,7 @@ const PinpointLocation = () => {
           ),
           postalCode: getAddressComponent(addressComponents, 'postal_code'),
         };
-        setValue('state', details?.province);
+        setDetailAddress(details);
         console.log(details);
         setTempAddress(data.results[0].formatted_address);
       }
-- 
cgit v1.2.3


From d1592286eef165533c21d52aec70dbb703cdcfd3 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Wed, 18 Dec 2024 15:03:52 +0700
Subject: feedback uat

---
 src/lib/maps/components/PinPointMap.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'src/lib/maps/components/PinPointMap.jsx')

diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
index 201fdeb4..acff5d67 100644
--- a/src/lib/maps/components/PinPointMap.jsx
+++ b/src/lib/maps/components/PinPointMap.jsx
@@ -66,6 +66,7 @@ const PinpointLocation = () => {
       if (data.results[0]) {
         const addressComponents = data.results[0].address_components;
         const details = {
+          route : getAddressComponent(addressComponents, 'route')+' '+getAddressComponent(addressComponents, 'street_number')+' '+getAddressComponent(addressComponents, 'administrative_area_level_7')+' '+getAddressComponent(addressComponents, 'administrative_area_level_6'),
           province: getAddressComponent(
             addressComponents,
             'administrative_area_level_1'
@@ -85,7 +86,6 @@ const PinpointLocation = () => {
           postalCode: getAddressComponent(addressComponents, 'postal_code'),
         };
         setDetailAddress(details);
-        console.log(details);
         setTempAddress(data.results[0].formatted_address);
       }
     } catch (error) {
@@ -115,10 +115,14 @@ const PinpointLocation = () => {
       alert('Silahkan pilih lokasi terlebih dahulu');
       return;
     }
+    // console.log('tempPosition', tempPosition.lat);
+    getAddress(tempPosition.lat, tempPosition.lng);
     setSelectedPosition(tempPosition);
     setAddressMaps(tempAddress);
   };
 
+  console.log('set selected position',selectedPosition);
+
   return (
     <div className='w-full'>
       <h3>Tentukan Pinpoint Lokasi</h3>
-- 
cgit v1.2.3


From 0aa0d458e668520ef96ccf7ecb35bf84a585b279 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Mon, 21 Apr 2025 13:05:57 +0700
Subject: fedback renca

---
 src/lib/maps/components/PinPointMap.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/lib/maps/components/PinPointMap.jsx')

diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
index acff5d67..acd5ab92 100644
--- a/src/lib/maps/components/PinPointMap.jsx
+++ b/src/lib/maps/components/PinPointMap.jsx
@@ -26,7 +26,7 @@ const PinpointLocation = () => {
     libraries: ['places'],
   });
 
-  const { addressMaps, setAddressMaps, selectedPosition, setSelectedPosition, setDetailAddress } =
+  const { addressMaps, setAddressMaps, selectedPosition, setSelectedPosition, setDetailAddress, setPinedMaps } =
     useMaps();
 
   const [tempAddress, setTempAddress] = useState('');
@@ -119,6 +119,7 @@ const PinpointLocation = () => {
     getAddress(tempPosition.lat, tempPosition.lng);
     setSelectedPosition(tempPosition);
     setAddressMaps(tempAddress);
+    setPinedMaps(false)
   };
 
   console.log('set selected position',selectedPosition);
-- 
cgit v1.2.3


From 2e507ccbc92f18a0d7f8ebc59112a0337a0bd678 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 11 Jun 2025 13:40:45 +0700
Subject: <hafid> Pinpoint done

---
 src/lib/maps/components/PinPointMap.jsx | 139 ++++++++++++++++++--------------
 1 file changed, 77 insertions(+), 62 deletions(-)

(limited to 'src/lib/maps/components/PinPointMap.jsx')

diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
index acd5ab92..fde1f36c 100644
--- a/src/lib/maps/components/PinPointMap.jsx
+++ b/src/lib/maps/components/PinPointMap.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import {
   GoogleMap,
   useJsApiLoader,
@@ -8,49 +8,46 @@ import {
 import { useMaps } from '../stores/useMaps';
 import { LocateFixed, MapPinIcon } from 'lucide-react';
 import { Button } from '@chakra-ui/react';
-import { useForm } from 'react-hook-form';
 
 const containerStyle = {
   width: '100%',
   height: '400px',
 };
 
-const center = {
-  lat: -6.2, // Default latitude (Jakarta)
-  lng: 106.816666, // Default longitude (Jakarta)
+const defaultCenter = {
+  lat: -6.2,
+  lng: 106.816666,
 };
 
 const PinpointLocation = () => {
   const { isLoaded } = useJsApiLoader({
-    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY, // Pastikan API key ada di .env.local
+    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
     libraries: ['places'],
   });
 
-  const { addressMaps, setAddressMaps, selectedPosition, setSelectedPosition, setDetailAddress, setPinedMaps } =
-    useMaps();
+  const {
+    addressMaps,
+    setAddressMaps,
+    selectedPosition,
+    setSelectedPosition,
+    setDetailAddress,
+    setPinedMaps,
+  } = useMaps();
 
   const [tempAddress, setTempAddress] = useState('');
-  const [tempPosition, setTempPosition] = useState(center);
-  const { setValue } = useForm();
+  const [tempPosition, setTempPosition] = useState(defaultCenter);
+  const [markerIcon, setMarkerIcon] = useState(null);
 
   const autocompleteRef = useRef(null);
 
-  const onMapClick = useCallback((event) => {
-    const lat = event.latLng.lat();
-    const lng = event.latLng.lng();
-    setTempPosition({ lat, lng });
-    getAddress(lat, lng);
-  }, []);
-
-  const handlePlaceSelect = () => {
-    const place = autocompleteRef.current.getPlace();
-    if (place && place.geometry) {
-      const lat = place.geometry.location.lat();
-      const lng = place.geometry.location.lng();
-      setTempPosition({ lat, lng });
-      setTempAddress(place.formatted_address);
+  useEffect(() => {
+    if (isLoaded && window.google) {
+      setMarkerIcon({
+        url: 'https://cdn.pixabay.com/photo/2014/04/03/10/03/google-309740_1280.png',
+        scaledSize: new window.google.maps.Size(25, 40),
+      });
     }
-  };
+  }, [isLoaded]);
 
   const getAddressComponent = (components, type) => {
     const component = components.find((comp) => comp.types.includes(type));
@@ -63,43 +60,59 @@ const PinpointLocation = () => {
         `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}`
       );
       const data = await response.json();
+
       if (data.results[0]) {
         const addressComponents = data.results[0].address_components;
+        const formattedAddress = data.results[0].formatted_address;
+
         const details = {
-          route : getAddressComponent(addressComponents, 'route')+' '+getAddressComponent(addressComponents, 'street_number')+' '+getAddressComponent(addressComponents, 'administrative_area_level_7')+' '+getAddressComponent(addressComponents, 'administrative_area_level_6'),
-          province: getAddressComponent(
-            addressComponents,
-            'administrative_area_level_1'
-          ),
-          district: getAddressComponent(
-            addressComponents,
-            'administrative_area_level_2'
-          ),
-          subDistrict: getAddressComponent(
-            addressComponents,
-            'administrative_area_level_3'
-          ),
-          village: getAddressComponent(
-            addressComponents,
-            'administrative_area_level_4'
-          ),
+          street:
+            getAddressComponent(addressComponents, 'route') +
+            ' ' +
+            getAddressComponent(addressComponents, 'street_number'),
+          province: getAddressComponent(addressComponents, 'administrative_area_level_1'),
+          district: getAddressComponent(addressComponents, 'administrative_area_level_2'),
+          subDistrict: getAddressComponent(addressComponents, 'administrative_area_level_3'),
+          village: getAddressComponent(addressComponents, 'administrative_area_level_4'),
           postalCode: getAddressComponent(addressComponents, 'postal_code'),
         };
+
         setDetailAddress(details);
-        setTempAddress(data.results[0].formatted_address);
+        setTempAddress(formattedAddress);
       }
     } catch (error) {
       console.error('Error fetching address:', error);
     }
   };
 
+  const onMapClick = useCallback((event) => {
+    const lat = event.latLng.lat();
+    const lng = event.latLng.lng();
+    const newPosition = { lat, lng };
+    setTempPosition(newPosition);
+    getAddress(lat, lng);
+  }, []);
+
+  const handlePlaceSelect = () => {
+    const place = autocompleteRef.current.getPlace();
+    if (place && place.geometry) {
+      const lat = place.geometry.location.lat();
+      const lng = place.geometry.location.lng();
+      const newPosition = { lat, lng };
+      setTempPosition(newPosition);
+      setTempAddress(place.formatted_address);
+      getAddress(lat, lng);
+    }
+  };
+
   const handleUseCurrentLocation = () => {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(
         (position) => {
           const lat = position.coords.latitude;
           const lng = position.coords.longitude;
-          setTempPosition({ lat, lng });
+          const newPosition = { lat, lng };
+          setTempPosition(newPosition);
           getAddress(lat, lng);
         },
         (error) => {
@@ -115,18 +128,16 @@ const PinpointLocation = () => {
       alert('Silahkan pilih lokasi terlebih dahulu');
       return;
     }
-    // console.log('tempPosition', tempPosition.lat);
-    getAddress(tempPosition.lat, tempPosition.lng);
+
     setSelectedPosition(tempPosition);
     setAddressMaps(tempAddress);
-    setPinedMaps(false)
+    setPinedMaps(false);
   };
 
-  console.log('set selected position',selectedPosition);
-
   return (
     <div className='w-full'>
       <h3>Tentukan Pinpoint Lokasi</h3>
+
       <div style={{ marginBottom: '10px' }}>
         {isLoaded ? (
           <Autocomplete
@@ -152,15 +163,20 @@ const PinpointLocation = () => {
             zoom={15}
             onClick={onMapClick}
           >
-            <Marker
-              position={tempPosition}
-              draggable={true}
-              onDragEnd={(e) => onMapClick(e)}
-              icon={{
-                url: 'https://maps.google.com/mapfiles/ms/icons/red-pushpin.png',
-                scaledSize: new window.google.maps.Size(40, 40),
-              }}
-            />
+            {markerIcon && (
+              <Marker
+                position={tempPosition}
+                draggable={true}
+                onDragEnd={(e) => {
+                  const lat = e.latLng.lat();
+                  const lng = e.latLng.lng();
+                  const newPosition = { lat, lng };
+                  setTempPosition(newPosition);
+                  getAddress(lat, lng);
+                }}
+                icon={markerIcon}
+              />
+            )}
           </GoogleMap>
         ) : (
           <p>Loading map...</p>
@@ -169,16 +185,15 @@ const PinpointLocation = () => {
 
       <div style={{ marginTop: '20px' }}>
         <Button variant='solid' onClick={handleUseCurrentLocation}>
-          <LocateFixed class='h-6 w-6 text-gray-500 mr-2' /> Gunakan Lokasi Saat
-          ini
+          <LocateFixed className='h-6 w-6 text-gray-500 mr-2' /> Gunakan Lokasi Saat Ini
         </Button>
       </div>
 
       <div style={{ marginTop: '10px' }}>
         <p>PinPoint :</p>
         <div className='flex gap-x-2 shadow-md rounded-sm text-gray-500 p-3 items-center'>
-          <MapPinIcon class='h-8 w-8 text-gray-500 mr-3' />
-          <label> {tempAddress}</label>
+          <MapPinIcon className='h-8 w-8 text-gray-500 mr-3' />
+          <label>{tempAddress || 'Pilih lokasi di peta'}</label>
         </div>
       </div>
 
-- 
cgit v1.2.3


From e0e0729ee57d2f9b1188a0604e3cc4a51317b0ed Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 12 Jun 2025 11:00:00 +0700
Subject: <hafid> fix pinpoint

---
 src/lib/maps/components/PinPointMap.jsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

(limited to 'src/lib/maps/components/PinPointMap.jsx')

diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
index fde1f36c..c46d838a 100644
--- a/src/lib/maps/components/PinPointMap.jsx
+++ b/src/lib/maps/components/PinPointMap.jsx
@@ -19,7 +19,7 @@ const defaultCenter = {
   lng: 106.816666,
 };
 
-const PinpointLocation = () => {
+const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress }) => {
   const { isLoaded } = useJsApiLoader({
     googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
     libraries: ['places'],
@@ -34,8 +34,15 @@ const PinpointLocation = () => {
     setPinedMaps,
   } = useMaps();
 
-  const [tempAddress, setTempAddress] = useState('');
-  const [tempPosition, setTempPosition] = useState(defaultCenter);
+  const [tempAddress, setTempAddress] = useState(initialAddress || '');
+  const [tempPosition, setTempPosition] = useState(
+    initialLatitude && initialLongitude 
+      ? { lat: parseFloat(initialLatitude), lng: parseFloat(initialLongitude) }
+      : selectedPosition.lat && selectedPosition.lng
+        ? selectedPosition
+        : defaultCenter
+  );
+
   const [markerIcon, setMarkerIcon] = useState(null);
 
   const autocompleteRef = useRef(null);
@@ -47,7 +54,12 @@ const PinpointLocation = () => {
         scaledSize: new window.google.maps.Size(25, 40),
       });
     }
-  }, [isLoaded]);
+
+    // If we have initial coordinates but no address, fetch the address
+    if (initialLatitude && initialLongitude && !initialAddress) {
+      getAddress(parseFloat(initialLatitude), parseFloat(initialLongitude));
+    }
+  }, [isLoaded, initialLatitude, initialLongitude, initialAddress]);
 
   const getAddressComponent = (components, type) => {
     const component = components.find((comp) => comp.types.includes(type));
@@ -147,6 +159,8 @@ const PinpointLocation = () => {
             <input
               type='text'
               placeholder='Cari Alamat...'
+              value={tempAddress}
+              onChange={(e) => setTempAddress(e.target.value)}
               style={{ width: '100%', padding: '8px' }}
             />
           </Autocomplete>
@@ -209,4 +223,4 @@ const PinpointLocation = () => {
   );
 };
 
-export default PinpointLocation;
+export default PinpointLocation;
\ No newline at end of file
-- 
cgit v1.2.3

