지도에서 위치 검색 및 주소 표시 기능 구현, 검색 결과와 연동하여 지도 위치 이동

1. 프로젝트 설정

먼저 리액트 프로젝트를 설정해야 합니다. Create React App을 사용하여 신규 리액트 프로젝트를 생성합니다.

            npx create-react-app react-map-search
        

설치가 완료되면 프로젝트 디렉토리로 이동합니다.

            cd react-map-search
        

2. 지도 API 선택 및 설치

여기서는 Google Maps API를 사용하여 지도를 표시하고, 위치 검색 기능을 구현해 보겠습니다. 시작하기 전에 Google Cloud Console에서 API 키를 발급받아야 합니다.

API 키를 발급받은 후, 필요한 라이브러리를 설치합니다.

            npm install @react-google-maps/api
        

3. 기본 지도의 설정

이제 기본적인 지도를 설정할 준비가 되었습니다. 먼저 App.js 파일을 열고 다음과 같이 수정합니다.

            
                import { GoogleMap, LoadScript } from '@react-google-maps/api';
                const mapContainerStyle = {
                    height: "400px",
                    width: "800px"
                };
                const center = {
                    lat: -3.745,
                    lng: -738
                };
                
                function App() {
                    return (
                        
                            
                            
                        
                    );
                }
                export default App;
            
        

4. 위치 검색 기능 구현

지도에서 위치 검색을 가능하게 하기 위해 입력 필드를 추가하고 사용자가 입력한 주소를 기반으로 위치를 검색하는 기능을 구현합니다.

            
                import { useState } from 'react';
                import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
                
                function App() {
                    const [location, setLocation] = useState(center);
                    const [address, setAddress] = useState("");

                    const handleSearch = () => {
                        const geocoder = new window.google.maps.Geocoder();
                        geocoder.geocode({ address: address }, (results, status) => {
                            if (status === "OK") {
                                setLocation({
                                    lat: results[0].geometry.location.lat(),
                                    lng: results[0].geometry.location.lng()
                                });
                            } else {
                                alert("주소를 찾을 수 없습니다.");
                            }
                        });
                    };

                    return (
                        
                             setAddress(e.target.value)}
                                placeholder="주소를 입력하세요"
                            />
                            검색
                            
                                
                            
                        
                    );
                }
            
        

위의 코드는 입력한 주소를 기반으로 지도를 업데이트하고 해당 주소에 마커를 표시하는 기능을 구현합니다. 사용자가 주소를 입력하고 검색 버튼을 클릭하면, Google Geocoding API를 통해 주소를 위도와 경도로 변환합니다.

5. 사용자 인터페이스 개선

사용자 편의를 위해 입력 필드와 버튼을 스타일링하여 더 나은 사용자 경험을 제공합니다.

            
                const inputStyle = {
                    padding: "10px",
                    marginBottom: "10px",
                    width: "300px"
                };

                // App 컴포넌트 안에서
                return (
                    

                         setAddress(e.target.value)}
                            placeholder="주소를 입력하세요"
                        />
                        검색
                        // ... 나머지 코드
                    
                );
            
        

이제 사용자가 입력한 주소를 보다 잘 볼 수 있도록 입력창에 스타일을 추가했습니다.

6. 에러 처리 및 사용자 피드백

검색을 수행할 때 발생할 수 있는 여러 오류를 처리하고 사용자에게 피드백을 제공하는 것이 중요합니다. 예를 들어, 주소가 잘못된 경우에 대한 처리를 추가하겠습니다.

            
                const handleSearch = () => {
                    // ... 기존 코드

                    geocoder.geocode({ address: address }, (results, status) => {
                        if (status === "OK") {
                            // 위치 업데이트
                        } else {
                            alert("주소를 찾을 수 없습니다: " + status);
                        }
                    });
                };
            
        

7. 여러 마커와 경로 표시

여러 위치를 검색할 수 있도록 다수의 마커를 지도에 표시하는 기능을 추가합니다. 여러 주소를 검색한 후, 이들이 모두 지도에 표시될 수 있도록 하겠습니다.

            
                const [markers, setMarkers] = useState([]);

                const handleSearch = () => {
                    // ... 기존 코드
                    setMarkers([...markers, { lat: location.lat, lng: location.lng }]);
                };

                return (
                    
                        {markers.map((marker, index) => (
                            
                        ))}
                    
                );
            
        

8. 최종 점검 및 배포

모든 기능이 구현되면, 잘 동작하는지 확인한 후 배포 준비를 합니다. 사용자에게 배포할 수 있도록 빌드합니다.

            npm run build