[react] 지도에서 사용자 설정한 지점 저장하기

22 Dec 2023

react

React에서 Google Maps API를 이용하여 지도를 표시하고, 사용자가 클릭한 지점을 저장하는 방법을 알아보겠습니다.

구현 방법

Google Maps API 키 발급
먼저 Google Cloud Platform Console에서 Maps JavaScript API를 활성화하고 API 키를 발급받습니다.
```
Google Cloud Platform Console: https://console.cloud.google.com/
```
Google Maps React 라이브러리 설치
React 앱에서 Google Maps를 쉽게 활용할 수 있도록 google-map-react 또는 react-google-maps와 같은 라이브러리를 설치합니다.
```
npm install google-map-react
```

지도 표시 및 클릭 이벤트 처리
Google Maps를 React 컴포넌트에서 렌더링하고, 지도 클릭 이벤트를 처리하여 사용자가 클릭한 위치를 얻습니다.

   
import React, { useState } from 'react';
import GoogleMapReact from 'google-map-react';

const Map = () => {
  const [selectedLocation, setSelectedLocation] = useState(null);

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

  return (
    <div style={{ height: '400px', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'YOUR_API_KEY' }}
        defaultCenter={{ lat: 37.5665, lng: 126.9780 }}
        defaultZoom={11}
        onClick={handleMapClick}
      >
        {selectedLocation &&
          <Marker
            lat={selectedLocation.lat}
            lng={selectedLocation.lng}
            text="Selected Location"
          />
        }
      </GoogleMapReact>
    </div>
  );
};

const Marker = ({ text }) => (
  <div style={{
    color: 'white',
    background: 'blue',
    padding: '10px 20px',
    display: 'inline-flex',
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: '100%',
    transform: 'translate(-50%, -50%)'
  }}>
    {text}
  </div>
);
   

지점 저장
사용자가 클릭한 위치를 상태로 관리하고, 필요에 따라 서버로 전송하여 저장합니다.
저장된 지점 표시
저장된 지점을 지도에 마커로 표시하거나 목록으로 보여주어 사용자에게 시각적으로 확인할 수 있게 합니다.

결론

React를 사용하여 Google Maps를 이용해 지도에서 사용자가 설정한 지점을 저장하는 방법에 대해 알아보았습니다. 사용자의 지리적 정보를 수집하고 활용하는 기능을 개발할 때, 이러한 방법을 적용할 수 있습니다.

이 예제는 Google Maps를 사용하였지만, 다른 지도 API나 라이브러리를 이용하여 비슷한 방식으로 구현할 수 있습니다.

구현 방법

결론

참고 자료