[React] google places API + react-places-autocomplete

google places API와 react-places-autocomplete를 사용하여 장소 검색창을 구현하고, 위/경도 추출
(google places API Key를 발급받았다는 전제 하에 작성되었습니다.)

docs
react-places-autocomplete

github
GitHub - hibiken/react-places-autocomplete: React component for Google Maps Places Autocomplete

📍 Settings

👉 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>

📍 Full-Code

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>
    );
  }
}

📍 Result

아래와 같은 결과를 얻을 수 있다.

console창 확인

구하고자 했던 위,경도 값을 추출