Colin's Blog
[react] 지도에서 경로 표시하기

React 애플리케이션에서 Google Maps API를 사용하여 지도에 경로를 표시하는 방법에 대해 알아보겠습니다.

Google Maps API 키 받기

먼저, Google Cloud Platform에서 Maps JavaScript API를 활성화하고 API 키를 받아야 합니다. Google Cloud Platform 콘솔에 가서 적절한 프로젝트를 만들고 Maps JavaScript API를 활성화한 후 API 키를 받으세요.

React 앱에 Google지도 라이브러리 추가하기

앱 디렉터리에서 다음 명령어로 Google 지도 API를 사용하기 위한 라이브러리를 설치하세요.

npm install @react-google-maps/api

지도에 경로 표시하기

다음은 React 애플리케이션에서 Google Maps API를 사용하여 경로를 표시하는 간단한 예제입니다.


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

const MapContainer = () => {
  const path = [
    { lat: 37.7749, lng: -122.4194 },
    { lat: 34.0522, lng: -118.2437 }
  ];
  
  return (
    <GoogleMap
      mapContainerStyle={{ width: '100%', height: '400px' }}
      center={path[0]}
      zoom={6}
    >
      <Polyline path={path} />
    </GoogleMap>
  );
};

export default MapContainer;

위 예제에서는 Polyline 컴포넌트를 사용하여 경로를 표시합니다. path 배열에는 각 지점의 위도와 경도가 포함되어 있습니다.

마치며

이제 React 애플리케이션에서 Google 지도 API를 사용하여 경로를 표시하는 방법에 대해 알아보았습니다. 위 예제를 참고하여 지도에 원하는 경로를 표시해 보세요.

참고 자료

© 2018 Colin. All rights reserved.