summaryrefslogtreecommitdiff
path: root/src/lib/maps/components/PinPointMap.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/maps/components/PinPointMap.jsx')
-rw-r--r--src/lib/maps/components/PinPointMap.jsx71
1 files changed, 45 insertions, 26 deletions
diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
index c46d838a..75ab1d59 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));
}
@@ -66,6 +64,7 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress })
return component ? component.long_name : '';
};
+ // fill from pin point
const getAddress = async (lat, lng) => {
try {
const response = await fetch(
@@ -78,14 +77,26 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress })
const formattedAddress = data.results[0].formatted_address;
const details = {
- 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'),
+ // 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'),
};
@@ -136,8 +147,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 +191,13 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress })
{isLoaded ? (
<GoogleMap
mapContainerStyle={containerStyle}
- center={tempPosition}
+ center={tempPosition || getDefaultCenter()} // ✅ aman jika null
zoom={15}
onClick={onMapClick}
>
{markerIcon && (
<Marker
- position={tempPosition}
+ position={tempPosition || getDefaultCenter()} // ✅ selalu ada posisi
draggable={true}
onDragEnd={(e) => {
const lat = e.latLng.lat();
@@ -199,7 +217,8 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress })
<div style={{ marginTop: '20px' }}>
<Button variant='solid' onClick={handleUseCurrentLocation}>
- <LocateFixed className='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>