[react] 지도에서 스포츠 시설 정보 표시하기

22 Dec 2023

react

React에서 지도 위에 스포츠 시설 정보를 표시하려면, 다음과 같은 단계를 따를 수 있습니다.

지도 API 선택: 구글 맵, 네이버 맵, 카카오 맵 등의 API 중 하나를 선택합니다.
API 키 발급: 선택한 지도 API의 공식 웹사이트에서 개발자 계정을 생성하고 API 키를 발급받습니다.
React 앱에 지도 라이브러리 추가: 선택한 지도 API의 React용 라이브러리를 설치하고 프로젝트에 추가합니다.
지도 컴포넌트 생성: React 컴포넌트를 사용하여 지도를 표시하고 초기 위치를 설정합니다.
스포츠 시설 데이터 가져오기: 스포츠 시설 정보를 제공하는 API를 활용하여 데이터를 가져옵니다.
마커 추가 및 정보 표시: 가져온 스포츠 시설 데이터를 기반으로 지도 위에 마커를 표시하고, 마커를 클릭했을 때 해당 시설의 정보를 표시하는 기능을 구현합니다.

다음은 React와 Google 맵 API를 활용하여 스포츠 시설 정보를 지도에 표시하는 예시 코드입니다.

import React, { useState, useEffect } from 'react';
import { GoogleMap, LoadScript, Marker, InfoWindow } from '@react-google-maps/api';

const mapStyles = {
  height: "100vh",
  width: "100%"
};

const defaultCenter = {
  lat: 37.7749,
  lng: -122.4194
};

const sportsFacilityData = [
  { id: 1, name: '테니스코트', location: { lat: 37.772, lng: -122.420 } },
  { id: 2, name: '체육관', location: { lat: 37.773, lng: -122.421 } },
  // 기타 스포츠 시설 데이터
];

const MapContainer = () => {
  const [selectedFacility, setSelectedFacility] = useState(null);

  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={mapStyles}
        zoom={13}
        center={defaultCenter}
      >
        {sportsFacilityData.map(facility => (
          <Marker
            key={facility.id}
            position={facility.location}
            onClick={() => setSelectedFacility(facility)}
          />
        ))}

        {selectedFacility && (
          <InfoWindow
            position={selectedFacility.location}
            onCloseClick={() => setSelectedFacility(null)}
          >
            <>
              <h3>{selectedFacility.name}</h3>
              <p>추가 정보 및 상세 내용</p>
            </>
          </InfoWindow>
        )}
      </GoogleMap>
    </LoadScript>
  );
};

export default MapContainer;

이 예시 코드는 React와 @react-google-maps/api 라이브러리를 사용하여 Google 맵 위에 스포츠 시설 정보를 표시하는 간단한 방법을 보여줍니다. 선택한 스포츠 시설에 관한 추가적인 정보는 InfoWindow를 통해 표시됩니다.

참고 문헌: