1. 환경 설정

리액트 프로젝트를 시작하기 위해 기본 개발 환경을 설정합니다. Node.js와 npm이 설치되어 있어야 하며, create-react-app을 사용하여 새로운 리액트 프로젝트를 생성합니다.

npx create-react-app my-maps-app

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

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

2. 구글 맵 API 키 발급받기

구글 맵을 사용하기 위해서는 API 키가 필요합니다. 구글 클라우드 플랫폼에 가입하여 Google Maps JavaScript API를 활성화하고 API 키를 생성합니다.

API 키를 발급받은 후, 이를 환경 변수에 저장하여 안전하게 사용할 수 있습니다. 프로젝트 루트에 .env 파일을 생성하고 다음과 같은 내용을 추가합니다.

REACT_APP_GOOGLE_MAPS_API_KEY=your_api_key_here

3. 기본 맵 컴포넌트 생성

이제 기본 맵 컴포넌트를 생성해 보겠습니다. src/components/Map.js 파일을 생성하고 아래 코드를 추가합니다.

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

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

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

const Map = () => {
  return (
    
      
      
    
  );
};

export default Map;
        

코드를 통해 구글 맵을 로드하고 기본 위치를 설정할 수 있습니다. 이 컴포넌트를 App.js에 임포트하여 사용합니다.

import React from 'react';
import Map from './components/Map';

function App() {
  return (
    

      
나의 지도 애플리케이션
      
    
  );
}

export default App;
        

4. 기본 마커 추가하기

이제 기본 마커를 지도에 추가해 보겠습니다. Map.js 파일에 마커 컴포넌트를 추가합니다.

import { Marker } from '@react-google-maps/api';

const Map = () => {
  const markerPosition = {{
    lat: -3.745,
    lng: -38.523
  }};

  return (
    
      
        
      
    
  );
};
        

위 코드는 특정 위치에 마커를 추가하는 방법을 보여줍니다. 마커의 위치는 markerPosition 객체를 통해 설정됩니다.

5. 사용자 위치 기반 마커 표시하기

이제 사용자의 현재 위치를 기반으로 마커를 표시해 보겠습니다. 사용자 위치를 가져오기 위해 HTML5 Geolocation API를 활용하겠습니다.

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

const Map = () => {
  const [userLocation, setUserLocation] = useState(null);
  
  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        setUserLocation({
          lat: position.coords.latitude,
          lng: position.coords.longitude
        });
      });
    }
  }, []);

  return (
    
      
        {userLocation && }
      
    
  );
};
        

이제 사용자 위치에 따라 마커가 자동으로 표시됩니다. 사용자가 자신의 위치를 허용했을 때 마커가 지도에 나타납니다.

6. 마커 클릭 시 정보창 표시하기

마커 클릭 시 사용자가 원하는 추가 정보를 보여주는 정보창을 추가할 수 있습니다. 이를 위해 InfoWindow 컴포넌트를 사용합니다.

import { InfoWindow } from '@react-google-maps/api';

const Map = () => {
  const [selectedMarker, setSelectedMarker] = useState(null);

  return (
    
      
        {userLocation &&  setSelectedMarker(userLocation)} 
        />}
        {selectedMarker && (
           setSelectedMarker(null)}
          >
            

              
내 위치
              
여기가 내 현재 위치입니다!
            
          
        )}
      
    
  );
};
        

이제 마커를 클릭하면 해당 위치에 정보창이 표시됩니다.

7. 마커 목록 및 필터링 기능 추가하기

여러 마커를 표시하고 이들을 필터링할 수 있는 기능을 추가해 보겠습니다. 예를 들어, 특정 카테고리에 따른 필터링이 가능합니다.

const locations = [
  { id: 1, name: '위치 1', lat: -3.745, lng: -38.523 },
  { id: 2, name: '위치 2', lat: -3.755, lng: -38.533 },
  // 더 많은 위치 추가
];

const Map = () => {
  const [selectedMarker, setSelectedMarker] = useState(null);
  
  return (
    

      

        {locations.map((location) => (
          
 setSelectedMarker(location)}>
            {location.name}
          
        ))}
      
      
        
          {locations.map(location => (
             setSelectedMarker(location)}
            />
          ))}
          {selectedMarker && (
             setSelectedMarker(null)}
            >
              

                
{selectedMarker.name}
              
            
          )}
        
      
    
  );
};
        

위 코드는 여러 마커를 추가하고, 각 마커에 대한 정보를 리스트로 표시하여 사용자가 쉽게 선택할 수 있도록 합니다.

8. 사용자 인터랙션 개선하기

사용자가 지도와 상호작용하는 방식을 개선하기 위해 몇 가지 향상된 기능을 추가할 수 있습니다. 예를 들어, 드래그 앤 드롭으로 마커 위치를 이동하거나, 사용자가 특정 범위의 마커만 표시하도록 필터링 기능을 추가할 수 있습니다.

const Map = () => {
  const [markerPosition, setMarkerPosition] = useState(userLocation);
  
  const handleMarkerDragEnd = (event) => {
    setMarkerPosition({ lat: event.latLng.lat(), lng: event.latLng.lng() });
  };

  return (
    
      
        {markerPosition && }
      
    
  );
};
        

이제 마커를 드래그하여 위치를 변경할 수 있습니다.

9. 최종 정리 및 배포

모든 기능을 구현한 후, 이제 애플리케이션을 배포할 준비를 합니다. npm run build 명령어를 실행하여 프로덕션 빌드를 생성한 후, 선택한 호스팅 서비스에 업로드하여 배포합니다.

리액트 애플리케이션은 Github Pages, Netlify, Vercel 등을 통해 간편하게 배포할 수 있습니다.