Google Street View를 React 앱에 통합하기 (Google Maps 없이)

Source: Dev.to

소개

Google Maps는 다양한 기능을 제공하지만, 트래픽이 많을 경우 비용이 문제가 될 수 있습니다. 전체 Google Map을 표시하지 않고도 앱에 Google Street View를 통합할 수 있습니다. 이 가이드는 Leaflet 지도(어떤 지도 제공업체와도 사용할 수 있음)를 사용해 React 앱에 Street View를 삽입하는 방법을 보여주며, 관련 제한 사항을 설명합니다.

사전 요구 사항

• Google Maps API 키 – 공식 문서를 따라 키를 발급받고 Google Cloud 프로젝트에서 결제 설정을 활성화하세요.
• Leaflet – 표준 Leaflet 설정을 사용합니다(API 키가 필요하지 않음).
• React – 예제에서는 react-leaflet을 사용해 통합을 간편하게 합니다.

Google Maps 스크립트 추가

index.html(또는 해당 진입점) 파일에 스크립트 태그를 추가합니다:

<!-- Insert your Google Maps script tag with your API key here -->

요금 개요

• Google Maps Platform은 사용량 기반 과금 모델을 사용합니다; 각 Street View 파노라마 로드는 청구 가능한 이벤트로 계산됩니다.
• API 키를 제공하는 프로젝트에 결제 설정이 활성화되어 있어야 합니다.
• 해당 SKU는 Dynamic Street View이며, 자세한 내용은 Google Maps 요금 페이지를 참고하세요.
• 2026년 2월 현재, 월 10,000 회의 Street View 호출은 무료입니다.

구현

의존성 설치

npm install react-leaflet leaflet
# or with yarn
yarn add react-leaflet leaflet

전체 App.tsx

import { MapContainer, TileLayer, Marker } from "react-leaflet";
import "./styles.css";
import { useEffect, useRef } from "react";

export default function App() {
  const streetViewRef = useRef(null);
  const location = [53.3957542, -1.3052656]; // latitude, longitude

  useEffect(() => {
    if (!window?.google || !streetViewRef.current) return;

    new window.google.maps.StreetViewPanorama(streetViewRef.current, {
      position: { lat: location[0], lng: location[1] },
      pov: {
        heading: 180,
        pitch: 0,
      },
      zoom: 1,
    });
  }, [location]);

  return (
    
      
        
        
      

      {/* Street View container */}
      
    
  );
}

단계별 설명

1. useRef 생성 (streetViewRef) – Street View가 렌더링될 DOM 요소를 보관합니다.
2. useEffect 훅 안에서 Google Maps 스크립트(window.google)와 ref가 준비되면 Street View 파노라마를 로드합니다.
3. 위치 전달 (lat 및 lng) – new window.google.maps.StreetViewPanorama에 전달합니다. 정확한 좌표가 필수이며, 소수점 자리수가 틀리면 빈 화면이 표시됩니다.
4. 컨테이너 렌더링 (<div> 등) – 파노라마가 보이도록 명시적인 너비와 높이를 지정합니다.
5. 나머지 컴포넌트는 동일한 위치에 마커를 표시하는 기본 Leaflet 지도를 설정합니다.

좌표 테스트

신뢰할 수 있는 위도와 경도 값을 찾는 방법:

1. Google Maps를 열고 원하는 Street View 지점을 찾습니다.
2. 네트워크 요청을 확인하거나 “공유” → “링크 복사” 옵션을 사용해 !3d(위도)와 !4d(경도) 파라미터를 추출합니다.

예제 실행

1. index.html의 스크립트 태그에 API 키를 삽입합니다.
2. React 개발 서버를 시작합니다(npm start 또는 yarn start).
3. 지도에 마커가 표시되고, 그 아래에 Street View 파노라마가 로드됩니다.

파노라마가 나타나지 않으면 컨테이너의 너비/높이가 0이 아닌지, 좌표가 정확한지 확인하세요.

추가 자료

• Leaflet Getting Started guide
• React‑Leaflet documentation
• Google Maps Street View API reference

Live CodeSandbox를 살펴보고(API 키를 추가) 구현을 자신의 프로젝트에 맞게 적용해 보세요. 즐거운 코딩 되세요!