Rev 473 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import { useState, useEffect } from 'react'
const useLocationAutocomplete = ({
inputRef,
}) => {
const [addresObject, setAddressObject] = useState({})
const [error, setError] = useState(null)
let autoComplete
function handleScriptLoad(input) {
autoComplete = new window.google.maps.places.Autocomplete(
input,
{ types: ['(cities)'] }
)
autoComplete.setFields([
'address_components',
'formatted_address',
'geometry',
])
autoComplete.addListener('place_changed', handlePlaceSelect)
}
function handlePlaceSelect() {
const addressObject = autoComplete.getPlace()
const query = addressObject.formatted_address
const address = {}
if (query) {
setError(null)
addresObject.address_components?.map((address_component) => {
const address_component_name = address_component.long_name
const address_component_type = address_component.types[0]
switch (address_component_type) {
case "route":
address["address1"] = address_component_name
break
case "sublocality":
address["address2"] = address_component_name
break
case "locality":
address["city1"] = address_component_name
break
case "administrative_area_level_2":
address["city2"] = address_component_name
break
case "administrative_area_level_1":
address["state"] = address_component_name
break
case "country":
address["country"] = address_component_name
break
case "postal_code":
address["postal_code"] = address_component_name
break
case "geometry":
address["latitude"] = address_component.latitude
address["longitude"] = address_component.longitude
break
default:
break
}
})
setAddressObject({ ...address, formatted_address: query })
}
else {
setError('Ha ocurrido un error')
}
}
useEffect(() => {
handleScriptLoad(inputRef)
}, [inputRef])
return { ...addresObject, error }
}
export default useLocationAutocomplete