[react] 지도에서 역사적인 장소 정보 표시하기

22 Dec 2023

react

React를 사용하여 지도에 역사적인 장소 정보를 표시하는 방법에 대해 알아보겠습니다. 이를 위해 우리는 React와 함께 Google Maps JavaScript API를 사용할 것입니다.

1. Google Maps JavaScript API 키 획득

먼저, Google Cloud 콘솔을 통해 Google Maps JavaScript API 키를 생성합니다. Google Cloud Console에 로그인하고 프로젝트를 생성한 후, 지도 서비스를 활성화하고 API 키를 생성합니다.

2. React 앱에 Google Maps 추가하기

React 앱에서 Google Maps을 사용하기 위해 google-maps-react 라이브러리를 설치합니다.

npm install google-maps-react

그런 다음, Google Maps를 표시할 컴포넌트를 생성하고, API 키를 사용하여 Google Maps를 초기화합니다.

import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

class MapContainer extends Component {
  render() {
    return (
      <Map
        google={this.props.google}
        initialCenter={{ lat: 34.052235, lng: -118.243683 }}
        zoom={10}
      >
        <Marker
          title={'The marker`s title will appear as a tooltip.'}
          name={'SOMA'}
          position={{ lat: 34.052235, lng: -118.243683 }}
        />
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
})(MapContainer);

위 코드에서 MapContainer 컴포넌트는 Google Maps를 초기화하고, 기본 위치와 마커를 표시합니다.

3. 역사적인 장소 정보 표시하기

마지막으로, 역사적인 장소 정보를 표시하는 컴포넌트를 만들어서 Google Maps 위에 표시합니다.

import React from 'react';

const HistoricalPlaces = () => {
  return (
    <div>
      <h2>Historical Places</h2>
      <ul>
        <li>Place 1</li>
        <li>Place 2</li>
        <li>Place 3</li>
      </ul>
    </div>
  );
};

export default HistoricalPlaces;

역사적인 장소 정보를 표시하는 컴포넌트를 생성한 후, Google Maps와 함께 해당 컴포넌트를 사용하여 역사적인 장소 정보를 표시합니다.

이제, React를 사용하여 Google Maps를 통해 역사적인 장소 정보를 표시하는 방법에 대해 알아봤습니다. 이를 통해 사용자들은 지도 위에서 역사적인 장소들을 쉽게 확인할 수 있습니다.