[react] 지도에서 문화 시설 정보 표시하기

22 Dec 2023

react

React 애플리케이션에서 지도에 문화 시설 정보를 표시하려면 몇 가지 방법이 있습니다. 가장 일반적인 방법 중 하나는 지도를 표시하는 React 컴포넌트를 사용하여 지도에 마커를 추가하는 것입니다. 이를 위해 Google Maps API나 Leaflet과 같은 지도 라이브러리를 사용할 수 있습니다.

Google Maps API를 사용하여 문화 시설 정보 표시하기

Google Maps API를 사용하여 문화 시설 정보를 표시하는 방법은 다음과 같습니다.

Google 지도 API 키 얻기: 먼저 Google Cloud Console에서 프로젝트를 생성하고 Google Maps JavaScript API 키를 얻어야 합니다.
react-google-maps 패키지 설치: React 애플리케이션에 react-google-maps 패키지를 설치하여 Google Maps를 통합합니다.
마커 추가: react-google-maps의 Marker 컴포넌트를 사용하여 문화 시설의 위치에 마커를 추가합니다.

import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";

const MapWithMarker = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultZoom={12}
      defaultCenter={{ lat: 37.7749, lng: -122.4194 }} // 초기 지도 중심 좌표
    >
      <Marker position={{ lat: 37.7749, lng: -122.4194 }} /> // 문화 시설 위치에 마커 추가
    </GoogleMap>
  ))
);

const App = () => (
  <div style={{ width: "100%", height: "400px" }}>
    <MapWithMarker
      googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${YOUR_API_KEY}&v=3.exp&libraries=geometry,drawing,places`}
      loadingElement={<div style={{ height: "100%" }} />}
      containerElement={<div style={{ height: "100%" }} />}
      mapElement={<div style={{ height: "100%" }} />}
    />
  </div>
);

export default App;

자세한 정보 표시: 마커 클릭 시 정보 창을 표시하여 자세한 문화 시설 정보를 보여줄 수 있습니다.

Leaflet을 사용하여 문화 시설 정보 표시하기

Leaflet은 기본적인 지도 표시 및 상호작용에 유용한 오픈 소스 JavaScript 지도 라이브러리입니다. React에서 Leaflet을 사용하여 문화 시설 정보를 표시하는 방법은 아래와 같습니다.

react-leaflet 패키지 설치: React 애플리케이션에 react-leaflet 패키지를 설치하여 Leaflet을 통합합니다.
마커 추가: react-leaflet의 Marker 컴포넌트를 사용하여 문화 시설의 위치에 마커를 추가합니다.

import { Map, TileLayer, Marker, Popup } from "react-leaflet";

const MapWithMarker = () => {
  const position = [51.505, -0.09]; // 문화 시설 위치 좌표
  return (
    <Map center={position} zoom={13}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      <Marker position={position}>
        <Popup>
          문화 시설 정보
        </Popup>
      </Marker>
    </Map>
  );
};

export default MapWithMarker;

결론

React 애플리케이션에서 지도 상에 문화 시설 정보를 표시하는 것은 Google Maps API나 Leaflet과 같은 지도 라이브러리를 사용하여 간단하게 구현할 수 있습니다. 각각의 라이브러리에는 자세한 문서 및 커뮤니티가 있으므로 프로젝트에 적합한 방법을 선택하여 사용할 수 있습니다.

참고: react-google-maps 문서, react-leaflet 문서