[react] 지도에서 관광 정보 표시하기

22 Dec 2023

react

React를 사용하여 지도 상에 관광 정보를 표시하는 방법에 대해 알아보겠습니다.

1. 필요한 도구 설치

먼저 React 프로젝트를 초기화하고, 지도 및 관련 정보를 표시하기 위해 필요한 라이브러리를 설치해야 합니다.

npx create-react-app map-display
cd map-display
npm install google-map-react

2. Google Maps API 키 가져오기

Google Maps API를 사용하기 위해서는 API 키가 필요합니다. Google Developers Console에서 프로젝트를 생성하고, Google Maps JavaScript API를 활성화한 후 API 키를 생성합니다.

3. 지도 컴포넌트 생성

다음으로, Google Map을 표시하기 위한 컴포넌트를 생성합니다.

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

const MapDisplay = ({ apiKey }) => {
  return (
    <div style={{ height: '400px', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: apiKey }}
        defaultCenter={{ lat: 59.95, lng: 30.33 }}
        defaultZoom={11}
      >
        {/* 관광 정보 표시 */}
      </GoogleMapReact>
    </div>
  );
}

export default MapDisplay;

4. 관광 정보 표시하기

지도 상에 관광 정보를 표시하려면, 관광 명소의 좌표를 이용하여 마커를 추가하고 정보를 표시할 수 있습니다. 아래는 예시입니다.

const MapDisplay = ({ apiKey, touristSpots }) => {
  // ... 이하 생략
  <GoogleMapReact
    bootstrapURLKeys={{ key: apiKey }}
    defaultCenter={{ lat: 59.95, lng: 30.33 }}
    defaultZoom={11}
  >
    {touristSpots.map((spot, index) => (
      <Marker
        key={index}
        lat={spot.lat}
        lng={spot.lng}
        text={spot.name}
      />
    ))}
  </GoogleMapReact>
  // ... 이하 생략
}

5. 마치며

이제 React를 사용하여 Google 지도 상에 관광 정보를 표시하는 방법에 대해 알아보았습니다. 원하는 위치의 관광 명소 정보를 가져와서 지도 상에 표시함으로써 사용자들에게 보다 즐거운 경험을 제공할 수 있습니다.

목차

1. 필요한 도구 설치

2. Google Maps API 키 가져오기

3. 지도 컴포넌트 생성

4. 관광 정보 표시하기

5. 마치며