React를 사용하여 웹 애플리케이션을 개발 중이라면, 지도 위에 다양한 형태의 오버레이를 표시해야 할 때가 있습니다. 이 포스트에서는 React와 지도 API를 결합하여 다양한 형태의 오버레이를 표시하는 방법에 대해 알아보겠습니다.

1. Google 지도 API 키 발급

먼저, Google 지도 API 키를 발급받아야 합니다. Google Cloud 플랫폼에서 프로젝트를 생성하고, 지도 API를 활성화한 후 API 키를 발급받습니다.

2. React 앱에 Google 지도 라이브러리 추가

React 앱에 Google 지도를 표시하기 위해서는 google-map-react와 같은 라이브러리를 사용하는 것이 좋습니다. 이 라이브러리를 사용하여 React 컴포넌트 내에서 Google 지도를 초기화하고 표시할 수 있습니다.

import React from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

const MapWithMarkers = () => {
  const defaultProps = {
    center: { lat: 59.95, lng: 30.33 },
    zoom: 11
  };

  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'YOUR_API_KEY' }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text="My Marker"
        />
      </GoogleMapReact>
    </div>
  );
}

export default MapWithMarkers;

3. 다양한 형태의 오버레이 표시

AnyReactComponent를 사용하여 다양한 형태의 오버레이를 표시할 수 있습니다. 이 컴포넌트를 활용하여 마커, 원, 선 등 다양한 형태의 오버레이를 표시할 수 있습니다. 또한, 이러한 오버레이들에 대한 스타일링과 이벤트 핸들링을 추가할 수 있습니다.

이렇게 React를 사용하여 지도 위에 다양한 형태의 오버레이를 표시하는 방법에 대해 알아보았습니다. 지도 API와 React를 결합하여 사용자에게 다양한 정보를 시각적으로 제공할 수 있습니다.