google places API와 react-places-autocomplete를 사용하여 장소 검색창을 구현하고, 위/경도 추출
(google places API Key를 발급받았다는 전제 하에 작성되었습니다.)
github
GitHub - hibiken/react-places-autocomplete: React component for Google Maps Places Autocomplete
👉 npm install --save react-places-autocomplete
typescript 사용 시
npm install @types/react-places-autocomplete
src/pages/SearchByGoogle.tsx
docs를 따라 아래와 같이 import
import {
geocodeByAddress,
geocodeByPlaceId,
getLatLng,
} from 'react-places-autocomplete';
public/index.html
API Key와 함께 script import
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
src/pages/SearchByGoogle.tsx
import React from 'react';
import PlacesAutocomplete, {
geocodeByAddress,
getLatLng,
} from 'react-places-autocomplete';
export default function SearchByGoogle {
const [address, setAddress] = useState<string>("")
const [location, setLocation] = useState<string>("");
const [latLng, setLatLng] = useState({
latitude:0,
longitude:0
})
const HandleLocationChange = (location: string) => {
setLocation(location);
};
const handleSelect = (location: string) => {
setAddress(location);
geocodeByAddress(location)
.then((results) => getLatLng(results[0]))
.then((latLng) => setLatLng({ latitude: latLng.lat, longitude: latLng.lng }))
.catch((error) => console.error("Error", error));
onClose(); // 검색이 완료되었다면 modal을 닫는 fn ... 중략
};
render() {
return (
<PlacesAutocomplete
value={location}
onChange={HandleLocationChange}
onSelect={handleSelect}
//Debounce가 필요하다면
//debounce={밀리초 단위} 추가
>
{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
<div>
<input
{...getInputProps({
placeholder: 'Search Places ...',
className: 'location-search-input',
})}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map(suggestion => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? { backgroundColor: '#fafafa', cursor: 'pointer' }
: { backgroundColor: '#ffffff', cursor: 'pointer' };
return (
<div
{...getSuggestionItemProps(suggestion, {
className,
style,
})}
>
<span>{suggestion.description}</span>
</div>
);
})}
</div>
</div>
)}
</PlacesAutocomplete>
);
}
}
아래와 같은 결과를 얻을 수 있다.
console창 확인
구하고자 했던 위,경도 값을 추출