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

22 Dec 2023

react

React 애플리케이션에서 지도 위에 박물관 위치와 정보를 표시하는 기능은 매우 유용합니다. 사용자들은 지도 상에서 박물관을 찾고 상세 정보를 확인할 수 있습니다. 이번 글에서는 React와 Google Maps JavaScript API를 활용하여 지도에서 박물관 정보를 표시하는 방법을 알아보겠습니다.

1. Google Maps JavaScript API 키 생성

먼저, Google Maps JavaScript API를 사용하기 위해 Google Cloud Platform에서 API 키를 생성해야 합니다. Google Cloud Console에 접속하여 새 프로젝트를 생성하고, Maps JavaScript API를 활성화하고 API 키를 발급받습니다.

2. React 애플리케이션 설정

React 프로젝트 폴더에서 npm install @react-google-maps/api 명령을 사용하여 @react-google-maps/api 라이브러리를 설치합니다. 이 라이브러리는 React에서 Google Maps를 쉽게 사용할 수 있도록 도와줍니다.

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

const mapContainerStyle = {
  width: '100%',
  height: '400px',
};

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

const museums = [
  { name: 'San Francisco Museum of Modern Art', location: { lat: 37.7852, lng: -122.4006 } },
  { name: 'de Young Museum', location: { lat: 37.7715, lng: -122.4686 } },
];

const MapWithMarkers = () => {
  const [selectedMuseum, setSelectedMuseum] = React.useState(null);

  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap mapContainerStyle={mapContainerStyle} center={center} zoom={12}>
        {museums.map((museum, index) => (
          <Marker
            key={index}
            position={museum.location}
            onClick={() => {
              setSelectedMuseum(museum);
            }}
          />
        ))}
        {selectedMuseum && (
          <InfoWindow
            position={selectedMuseum.location}
            onCloseClick={() => {
              setSelectedMuseum(null);
            }}
          >
            <div>
              <h2>{selectedMuseum.name}</h2>
              <p>More info about the museum here...</p>
            </div>
          </InfoWindow>
        )}
      </GoogleMap>
    </LoadScript>
  );
};

export default MapWithMarkers;

3. 애플리케이션 실행

위의 예제 코드를 포함한 React 애플리케이션을 실행하면 구글 지도 위에 박물관을 마커로 표시하고, 사용자가 마커를 클릭하면 해당 박물관의 정보를 InfoWindow로 표시하는 기능을 확인할 수 있습니다.

이처럼 React를 사용하여 Google Maps JavaScript API를 통해 지도 상에 박물관 정보를 표시하는 것은 매우 간단하고 유용합니다. 사용자들은 이를 통해 박물관의 위치와 정보를 편리하게 확인할 수 있습니다.