지도에서 사용자 인터랙션 기능 추가, 지도 드래그, 확대 축소 기능 제어하기

1. 서론

현대의 웹 애플리케이션에서 지도는 정보 시각화를 위해 필수적인 구성 요소로 자리 잡고 있습니다.
사용자 인터랙션을 통해 지도를 더욱 활용할 수 있도록 기능을 추가하는 것은 매우 중요합니다.
이 글에서는 리액트를 기반으로 한 웹 애플리케이션에서 지도에서 발생하는 사용자 인터랙션을 처리하는 방법에 대해 설명하겠습니다.

2. 지도 API 선택

사용자 인터랙션 기능이 포함된 지도를 구현하기 위해 여러 가지 지도의 API를 선택할 수 있습니다.
가장 널리 사용되는 지도 API로는 구글 지도, 오픈스트리트맵(OSM), Mapbox 등이 있습니다.
본 강좌에서는 구글 지도를 사용하여 예제를 설명할 것입니다.

구글 지도 API는 많은 기능을 제공하며 사용자 인터랙션을 지원하는 여러 가지 이벤트를 지원합니다.
API를 사용하기 위해서는 먼저 구글 클라우드 플랫폼에서 API 키를 생성해야 합니다.

3. 리액트 환경 설정

리액트 애플리케이션을 설정하기 위해 create-react-app 명령어를 사용하여 새 프로젝트를 생성합니다.
아래의 커맨드를 실행하여 새 프로젝트를 생성하세요:

npx create-react-app my-map-app

프로젝트 디렉토리로 이동 후, 필요한 패키지를 설치합니다:

cd my-map-app
npm install @react-google-maps/api

4. 지도 컴포넌트 생성

이제 구글 지도를 표시할 컴포넌트를 생성하겠습니다. src 폴더 내에 MapComponent.js라는 파일을 생성합니다.

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

const containerStyle = {
    width: '100%',
    height: '400px'
};

const center = {
    lat: 37.7749, // 샌프란시스코의 위도
    lng: -122.4194 // 샌프란시스코의 경도
};

const MapComponent = () => {
    return (
         
             console.log('지도 드래그됨:', e)}
                onZoomChanged={(e) => console.log('줌 수준 변경됨:', e)}
            >
                {/* 여기에 추가 기능을 넣을 수 있습니다 */}
            
        
    );
};

export default MapComponent;
            

5. 지도 드래그 및 확대/축소 기능 추가

위 예제에서는 기본적인 구글 지도를 생성했습니다. 이제 사용자의 드래그와 확대/축소 기능을 제어하는 방법을 알아보겠습니다.
onDragEnd 및 onZoomChanged 이벤트를 활용하여 사용자의 인터랙션을 처리할 수 있습니다.

먼저 useState 훅을 사용하여 현재 지도 중심 좌표와 확대/축소 수준을 상태로 관리하겠습니다.

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

const containerStyle = {
    width: '100%',
    height: '400px'
};

const MapComponent = () => {
    const [center, setCenter] = useState({ lat: 37.7749, lng: -122.4194 });
    const [zoom, setZoom] = useState(10);

    const handleDragEnd = (map) => {
        const newCenter = {
            lat: map.center.lat(),
            lng: map.center.lng()
        };
        setCenter(newCenter);
        console.log('드래그하여 새 중심:', newCenter);
    };

    const handleZoomChanged = (map) => {
        const newZoom = map.getZoom();
        setZoom(newZoom);
        console.log('새 줌 수준:', newZoom);
    };

    return (
         
            
                {/* 여기에 추가 기능을 넣을 수 있습니다 */}
            
        
    );
};

export default MapComponent;
            

6. 사용자 인터랙션에 따라 지도 업데이트

사용자가 드래그하거나 확대/축소할 때마다 지도가 해당 상태에 맞추어 업데이트됩니다. 사용자가 지도를 클릭했을 때도 마커를 추가하거나
다른 기능을 구현할 수 있습니다. 다음은 클릭 이벤트를 처리하는 방법입니다:

const handleMapClick = (event) => {
    const lat = event.latLng.lat();
    const lng = event.latLng.lng();
    console.log('사용자가 클릭한 위치:', { lat, lng });
    // 마커 추가 로직을 여기에 넣을 수 있습니다
};
            

이를 통해 클릭 이벤트에 따라 특정 작업을 수행할 수 있습니다. 마커를 추가하거나 정보를 불러오는 등의 작업을 할 수 있습니다.

7. 결론

React 애플리케이션에서 구글 지도를 사용하여 사용자 인터랙션 기능을 추가하는 방법에 대해 알아보았습니다.
지도에서 사용자의 드래그와 확대/축소를 처리하는 방법을 배우고, 클릭 이벤트로 추가적인 기능도 구현할 수 있었습니다.
이를 통해 사용자 경험을 더욱 풍부하게 만들 수 있을 것입니다.

8. 참고 자료

• 구글 지도 API 문서
• React Google Maps API 문서
• Create React App 문서