| 3719 |
stevensc |
1 |
import { useState, useEffect, useRef } from 'react';
|
|
|
2 |
|
|
|
3 |
export function useLocationAutocomplete() {
|
|
|
4 |
const [address, setAddress] = useState({});
|
|
|
5 |
const [error, setError] = useState(null);
|
|
|
6 |
const inputRef = useRef(null);
|
|
|
7 |
let autoComplete;
|
|
|
8 |
|
|
|
9 |
function handleScriptLoad(autoCompleteRef) {
|
|
|
10 |
autoComplete = new window.google.maps.places.Autocomplete(autoCompleteRef.current, {
|
|
|
11 |
types: ['(cities)']
|
|
|
12 |
});
|
|
|
13 |
autoComplete.setFields(['address_components', 'formatted_address', 'geometry']);
|
|
|
14 |
autoComplete.addListener('place_changed', handlePlaceSelect);
|
|
|
15 |
}
|
|
|
16 |
|
|
|
17 |
function handlePlaceSelect() {
|
|
|
18 |
setAddress({});
|
|
|
19 |
const addressPlace = autoComplete.getPlace();
|
|
|
20 |
const formattedAddress = addressPlace.formatted_address;
|
|
|
21 |
const addressComponents = [
|
|
|
22 |
...addressPlace.address_components,
|
|
|
23 |
{
|
|
|
24 |
latitude: addressPlace.geometry.location.lat(),
|
|
|
25 |
longitude: addressPlace.geometry.location.lng(),
|
|
|
26 |
types: ['geometry']
|
|
|
27 |
}
|
|
|
28 |
];
|
|
|
29 |
const address = {};
|
|
|
30 |
|
|
|
31 |
if (formattedAddress) {
|
|
|
32 |
setError(null);
|
|
|
33 |
addressComponents?.forEach((address_component) => {
|
|
|
34 |
const address_component_name = address_component.long_name;
|
|
|
35 |
const address_component_type = address_component.types[0];
|
|
|
36 |
|
|
|
37 |
switch (address_component_type) {
|
|
|
38 |
case 'route':
|
|
|
39 |
address.address1 = address_component_name;
|
|
|
40 |
break;
|
|
|
41 |
case 'sublocality':
|
|
|
42 |
address.address2 = address_component_name;
|
|
|
43 |
break;
|
|
|
44 |
case 'locality':
|
|
|
45 |
address.city1 = address_component_name;
|
|
|
46 |
break;
|
|
|
47 |
case 'administrative_area_level_2':
|
|
|
48 |
address.city2 = address_component_name;
|
|
|
49 |
break;
|
|
|
50 |
case 'administrative_area_level_1':
|
|
|
51 |
address.state = address_component_name;
|
|
|
52 |
break;
|
|
|
53 |
case 'country':
|
|
|
54 |
address.country = address_component_name;
|
|
|
55 |
break;
|
|
|
56 |
case 'postal_code':
|
|
|
57 |
address.postal_code = address_component_name;
|
|
|
58 |
break;
|
|
|
59 |
case 'geometry':
|
|
|
60 |
address.latitude = address_component.latitude;
|
|
|
61 |
address.longitude = address_component.longitude;
|
|
|
62 |
break;
|
|
|
63 |
default:
|
|
|
64 |
break;
|
|
|
65 |
}
|
|
|
66 |
});
|
|
|
67 |
|
|
|
68 |
setAddress({ ...address, formatted_address: formattedAddress });
|
|
|
69 |
} else {
|
|
|
70 |
setError('Ha ocurrido un error');
|
|
|
71 |
}
|
|
|
72 |
}
|
|
|
73 |
|
|
|
74 |
useEffect(() => {
|
|
|
75 |
handleScriptLoad(inputRef);
|
|
|
76 |
}, []);
|
|
|
77 |
|
|
|
78 |
return { address, error, ref: inputRef };
|
|
|
79 |
}
|