From 0fa70adbf4a9fab74337d35dcfd21722370ac93e Mon Sep 17 00:00:00 2001 From: Miqdad Date: Fri, 15 Aug 2025 08:32:50 +0700 Subject: Initial Commit fixing map --- src/lib/maps/components/PinPointMap.jsx | 62 +++++++++++++++++++++------------ 1 file changed, 40 insertions(+), 22 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 c46d838a..f89e6e75 100644 --- a/src/lib/maps/components/PinPointMap.jsx +++ b/src/lib/maps/components/PinPointMap.jsx @@ -14,37 +14,35 @@ const containerStyle = { height: '400px', }; -const defaultCenter = { - lat: -6.2, - lng: 106.816666, -}; - -const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress }) => { +const PinpointLocation = ({ + initialLatitude, + initialLongitude, + initialAddress, +}) => { const { isLoaded } = useJsApiLoader({ googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY, libraries: ['places'], }); const { - addressMaps, setAddressMaps, selectedPosition, setSelectedPosition, setDetailAddress, setPinedMaps, + getDefaultCenter, // ✅ ambil default center dari store } = useMaps(); const [tempAddress, setTempAddress] = useState(initialAddress || ''); const [tempPosition, setTempPosition] = useState( - initialLatitude && initialLongitude + initialLatitude && initialLongitude ? { lat: parseFloat(initialLatitude), lng: parseFloat(initialLongitude) } - : selectedPosition.lat && selectedPosition.lng - ? selectedPosition - : defaultCenter + : selectedPosition?.lat && selectedPosition?.lng + ? selectedPosition + : getDefaultCenter() // ✅ fallback aman untuk view ); const [markerIcon, setMarkerIcon] = useState(null); - const autocompleteRef = useRef(null); useEffect(() => { @@ -55,7 +53,7 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress }) }); } - // If we have initial coordinates but no address, fetch the address + // Jika ada koordinat awal tapi belum ada address → reverse geocode if (initialLatitude && initialLongitude && !initialAddress) { getAddress(parseFloat(initialLatitude), parseFloat(initialLongitude)); } @@ -82,10 +80,22 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress }) 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'), + 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'), }; @@ -136,8 +146,15 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress }) const handleSavePinpoint = (event) => { event.preventDefault(); - if (tempAddress === '') { - alert('Silahkan pilih lokasi terlebih dahulu'); + + // ✅ cegah save jika masih di default center (user belum benar2 pilih lokasi) + const dc = getDefaultCenter(); + const isDefault = + Math.abs(tempPosition.lat - dc.lat) < 1e-6 && + Math.abs(tempPosition.lng - dc.lng) < 1e-6; + + if (!tempAddress || isDefault) { + alert('Silahkan pilih lokasi di peta atau autocomplete terlebih dahulu'); return; } @@ -173,13 +190,13 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress }) {isLoaded ? ( {markerIcon && ( { const lat = e.latLng.lat(); @@ -199,7 +216,8 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress })
-- cgit v1.2.3 From cf76c139519b8fda880969e151928c203538fd69 Mon Sep 17 00:00:00 2001 From: Miqdad Date: Sat, 16 Aug 2025 14:31:09 +0700 Subject: Fix Map --- src/lib/maps/components/PinPointMap.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 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 f89e6e75..75ab1d59 100644 --- a/src/lib/maps/components/PinPointMap.jsx +++ b/src/lib/maps/components/PinPointMap.jsx @@ -64,6 +64,7 @@ const PinpointLocation = ({ return component ? component.long_name : ''; }; + // fill from pin point const getAddress = async (lat, lng) => { try { const response = await fetch( @@ -76,10 +77,10 @@ const PinpointLocation = ({ const formattedAddress = data.results[0].formatted_address; const details = { - street: - getAddressComponent(addressComponents, 'route') + - ' ' + - getAddressComponent(addressComponents, 'street_number'), + // street: + // getAddressComponent(addressComponents, 'route') + + // ' ' + + // getAddressComponent(addressComponents, 'street_number'), province: getAddressComponent( addressComponents, 'administrative_area_level_1' -- cgit v1.2.3