커스텀 마커 및 정보창 만들기, 마커 클릭 시 팝업 정보창 표시하기

이번 포스트에서는 리액트 애플리케이션에서 구글 맵 API를 사용하여 커스텀 마커와 정보창을 만들어보겠습니다. 사용자가 마커를 클릭했을 때 팝업 형태로 정보를 표시하는 기능을 구현해볼 것입니다. 이를 통해 지도 애플리케이션을 더욱 풍부하게 만들 수 있습니다.

준비하기

우선, 구글 맵을 사용할 수 있도록 준비가 필요합니다. 다음 단계를 따라 구글 API 키를 생성해 주세요:

  1. 구글 클라우드 플랫폼에 로그인합니다.
  2. 새 프로젝트를 생성합니다.
  3. API 및 서비스 > 라이브러리에서 ‘Maps JavaScript API’를 검색하고 활성화합니다.
  4. API 및 서비스 > 사용자 인증 정보에서 ‘API 키’를 생성합니다.

리액트 애플리케이션 생성

리액트 애플리케이션을 생성하려면, 아래의 명령을 터미널에 입력합니다.

npx create-react-app my-maps-app

이제 애플리케이션 폴더로 이동합니다.

cd my-maps-app

구글 맵 API 설치

구글 맵 API를 사용하기 위해 react-google-maps/api 패키지를 설치합니다. 터미널에 아래의 명령어를 입력하세요:

npm install @react-google-maps/api

기본 맵 컴포넌트 만들기

src 폴더 아래에 Map.js 파일을 생성하고, 기본적인 맵 컴포넌트를 구성합니다.


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

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

const center = {
    lat: 37.5665,
    lng: 126.978
};

const Map = () => {
    return (
        
            
                {/* 마커와 정보창은 여기서 추가할 것입니다 */}
            
        
    );
};

export default Map;

위 코드에서 YOUR_API_KEY를 구글 클라우드 플랫폼에서 발급받은 API 키로 교체하세요.

커스텀 마커 추가하기

이제 커스텀 마커를 추가해보겠습니다. 앞서 작성한 Map 컴포넌트에 Marker와 InfoWindow를 추가합니다.


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

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

const center = {
    lat: 37.5665,
    lng: 126.978
};

const Map = () => {
    const [selected, setSelected] = useState(null);

    const markers = [
        {
            id: 1,
            name: '서울시청',
            position: { lat: 37.5665, lng: 126.978 },
            info: '서울특별시 중구 세종대로 110'
        },
        {
            id: 2,
            name: '남산타워',
            position: { lat: 37.5512, lng: 126.9882 },
            info: '서울특별시 용산구 남산공원길 105'
        }
    ];

    return (
        
            
                {markers.map(marker => (
                     setSelected(marker)}
                    />
                ))}
                
                {selected && (
                     setSelected(null)}
                    >
                        

                            
{selected.name}

                            
{selected.info}

                        

                    
                )}
            
        
    );
};

export default Map;

컴포넌트 통합하기

이제 Map 컴포넌트를 App.js에서 사용해보겠습니다. src/App.js 파일을 열고 아래와 같이 수정하세요:


import React from 'react';
import './App.css';
import Map from './Map';

const App = () => {
    return (
        

            
리액트 커스텀 마커 만들기 예제

            
        

    );
};

export default App;

결과 확인하기

모든 준비가 완료되었습니다. 이제 애플리케이션을 실행해보겠습니다. 터미널에 아래의 명령어를 입력하세요:

npm start

브라우저에서 http://localhost:3000으로 이동하면 구현한 구글 맵과 커스텀 마커가 나타나는 것을 확인할 수 있습니다. 마커를 클릭하면 정보창이 표시됩니다.

결론

이번 포스트에서는 리액트에서 구글 맵 API를 활용해 커스텀 마커 및 정보창을 만드는 방법에 대해 알아보았습니다. 마커를 클릭할 때마다 다양한 정보를 표시할 수 있도록 구성하여, 여러분의 애플리케이션을 더 인터랙티브하게 만들 수 있습니다. 앞으로도 구글 맵 API를 이용해 더욱 다양한 기능을 추가해보길 바랍니다.

부록: 추가 기능 아이디어

  • 사용자 위치 기반 마커 표시하기
  • 다양한 아이콘 사용하기 (마커의 디자인 변경)
  • 마커 클러스터링 사용하기

추가로 다양한 기능을 구현함으로써, 애플리케이션에 더 많은 가치를 부여해보세요.