React + TypeScript로 Google Maps 위에 GeoJSON 시도 경계 시각화하기

최근 프로젝트에서 대한민국 시도 경계 데이터를 Google Maps 위에 시각화할 일이 있었다.
React와 TypeScript, 그리고 @react-google-maps/api 라이브러리를 활용해 이를 구현한 과정을 정리해본다.

✅ 목표

• Google Maps에 대한민국 시도 경계 데이터를 GeoJSON으로 시각화
• 경계 hover 시 색상 변경
• React + TypeScript 기반

📦 사용 기술

• React
• TypeScript
• @react-google-maps/api
• GeoJSON (대한민국 시도 경계 데이터)

1. 패키지 설치

npm install @react-google-maps/api

2. Google Maps API 키 발급

• Google Cloud Platform
• 프로젝트 생성 → Maps JavaScript API 활성화
• API 키 발급 → .env에 저장

REACT_APP_GOOGLE_MAPS_API_KEY=your_api_key_here

⚠️ 꼭 리퍼러 제한 설정하자! (*.yourdomain.com/*)
리퍼러 제한 설정 방법이 궁금하다면 아래 글을 참고해보자!
🔗 구글 Maps API 키 보안을 위한 Referrer 제한 설정법

3. GeoJSON 준비

• 공공데이터포털에서 대한민국 시도 경계 GeoJSON 다운로드
• type: FeatureCollection 형태여야 함
• 나는 이미 다른 분이 잘 정리해둔 GeoJSON 파일을 다운로드해서 사용했다. (정말 감사합니다! 🙏)
• GeoJSON 파일 출처: https://yeomss.tistory.com/267?utm_source=chatgpt.com

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "name": "서울특별시" },
      "geometry": {
        "type": "Polygon",
        "coordinates": [...]
      }
    },
    ...
  ]
}

4. 지도 컴포넌트 만들기

// components/KoreaMap.tsx
import { GoogleMap, LoadScript } from '@react-google-maps/api';
import { useRef } from 'react';

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

const center = {
  lat: 36.5,
  lng: 127.5,
};

export default function KoreaMap({ geoJson }: { geoJson: any }) {
  const mapRef = useRef<google.maps.Map | null>(null);

  const onLoad = (map: google.maps.Map) => {
    mapRef.current = map;

    // GeoJSON 데이터 추가
    map.data.addGeoJson(geoJson);

    // 기본 스타일 지정
    map.data.setStyle({
      fillColor: '#FFEDA0',
      strokeColor: '#555',
      strokeWeight: 1,
      fillOpacity: 0.6,
    });

    // Hover 스타일
    map.data.addListener('mouseover', (event: any) => {
      map.data.overrideStyle(event.feature, { fillColor: '#FEB24C' });
    });

    map.data.addListener('mouseout', (event: any) => {
      map.data.revertStyle();
    });
  };

  return (
    <LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY!}>
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={7}
        onLoad={onLoad}
      />
    </LoadScript>
  );
}

5. App.tsx에서 사용하기

import KoreaMap from './components/KoreaMap';
import sidoGeoJson from './SIDO_MAP_2022.json'; // GeoJSON import

function App() {
  return <KoreaMap geoJson={sidoGeoJson} />;
}

export default App;

💡 Tip

• GeoJSON 구조가 FeatureCollection이 아니면 mapshaper.org에서 변환 추천
• 도형이 너무 복잡하면 렌더링이 느릴 수 있으니 단순화 작업 고려
• 모바일에선 zoom 조절 필요 (8~9 적당)

✅ 결과

마무리

Google Maps에서 GeoJSON을 쉽게 불러올 수 있다는 점은 정말 편리하다.
GeoJSON만 잘 준비되면 지도 시각화는 생각보다 어렵지 않다.

다음엔 시군구 단위 또는 마우스 클릭 시 정보 보여주기 등 인터랙션을 더해볼 예정!
질문은 댓글로 편하게 남겨주세요 🙌

필요하면 이 포스트에 맞는 이미지나 코드 스니펫용 gist도 같이 넣을 수 있어.
포스팅용으로 꾸며주는 것도 도와줄 수 있으니까, 원하면 알려줘!