지도에서 위치 검색 및 주소 표시 기능 구현, 검색 필드를 통해 주소나 장소 찾기

1. 서론

현대 웹 어플리케이션에서 지도를 활용한 기능은 사용자 경험을 향상시키는 중요한 요소입니다.
이 튜토리얼에서는 구글 맵 API를 사용하여 원하는 주소나 장소를 검색하고,
이를 지도에 표시하는 기능을 구현할 것입니다.
우리는 React를 사용하여 이 기능을 구성할 것이며,
기본적으로 사용할 라이브러리와 프레임워크에 대해 알아보겠습니다.

2. 프로젝트 설정

React 프로젝트를 설정하는 과정은 간단합니다. 아래 명령어를 사용하여 새로운 React 애플리케이션을 생성하세요.

npx create-react-app location-search-app

프로젝트 디렉터리로 이동하여 필요한 라이브러리를 설치합니다.

cd location-search-app
npm install @react-google-maps/api

위치는 구글 맵 API를 사용하기 위해 필요습니다. 구글 클라우드 플랫폼에서 API 키를 발급받아야 합니다.

API 키를 발급받은 후, .env 파일을 생성하고 다음 내용을 추가합니다.

REACT_APP_GOOGLE_MAPS_API_KEY=YOUR_API_KEY

3. 기본 컴포넌트 생성

이제 기본적인 React 컴포넌트를 만들어 보겠습니다. 아래는 지도 컴포넌트를 생성하는 방법입니다.

{`import React, { useState } from 'react';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';

const containerStyle = {
    width: '800px',
    height: '600px'
};

const center = {
    lat: -3.745,
    lng: -38.523
};

const MyMap = () => {
    const [markerPosition, setMarkerPosition] = useState(center);

    const handleMapClick = (event) => {
        setMarkerPosition({
            lat: event.latLng.lat(),
            lng: event.latLng.lng()
        });
    };

    return (
        
            
                
            
        
    );
};

export default MyMap;`}

위 코드에서는 기본 지도와 마커를 정의합니다. 사용자가 지도를 클릭하면 마커의 위치가 업데이트 됩니다.

4. 주소 검색 기능 구현

주소 검색 기능을 추가하기 위해, 사용자가 입력한 주소를 기반으로 구글 맵 API를 통해 위치를 검색하고, 그 결과를 지도에 반영해야 합니다.

아래 코드에서 입력 필드를 추가하고, 주소 검색을 수행하는 함수를 구현하겠습니다.

{`const MyMap = () => {
    const [markerPosition, setMarkerPosition] = useState(center);
    const [address, setAddress] = useState('');

    const handleAddressChange = (event) => {
        setAddress(event.target.value);
    };

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

    return (
        
            
            검색
            
                
            
        
    );
};`}

위 코드는 사용자가 입력한 주소를 기반으로 마커의 위치를 업데이트하는 기능을 구현합니다. geocode() 메서드를 사용하여 주소를 위도 및 경도로 변환합니다.

5. 상태 관리 및 사용자 경험 향상

사용자 경험을 더욱 향상시키기 위해 주소 검색이 완료되면 알림 메시지를 표시하거나,
검색된 주소를 화면에 출력하는 등의 기능을 추가할 수 있습니다.
이와 같은 추가 작업을 통해 사용자가 검색 결과를 더 쉽게 확인할 수 있도록 도와줄 수 있습니다.

{`const MyMap = () => {
    ...
    const [searchResult, setSearchResult] = useState('');

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

    return (
        
            ...
            
{searchResult}
        
    );
};`}

이제 검색된 주소가 화면에 표시되어 사용자가 확인할 수 있습니다.

6. 마무리 및 확장 가능성

이번 글에서는 리액트를 사용하여 지도에서 위치를 검색하고 주소를 표시하는 기능을 구현하는 방법을 살펴보았습니다.
이 기본적인 기능을 바탕으로, 로컬 저장소를 사용하여 검색 기록을 저장하거나,
즐겨찾기 기능을 추가하는 등 다양한 확장 작업을 진행할 수 있습니다.