현대 웹 개발에서 지도는 사용자에게 위치 기반 기능을 제공하는 데 중요한 역할을 합니다. 본 강좌에서는 리액트(React)를 활용하여 지도에 마커를 추가하고, 사용자의 위치를 표시하는 방법에 대해 자세히 알아보겠습니다. 또한, 마커와 사용자 위치 아이콘의 스타일링에 대한 내용도 포함될 것입니다.

1. 필요한 라이브러리 설치하기

먼저, 리액트 프로젝트를 설정하고, google-maps-react 또는 leaflet과 같은 지도 라이브러리를 설치해야 합니다. 여기서는 google-maps-react를 사용할 것입니다.

npm install google-maps-react

2. 프로젝트 구조 설정하기

프로젝트의 기본 구조는 다음과 같이 설정합니다:

        ├── src
        │   ├── components
        │   │   └── MapContainer.js
        │   ├── App.js
        │   └── index.js
        └── package.json
        

3. MapContainer 컴포넌트 만들기

이제 MapContainer.js 파일을 생성하여 지도를 표시하는 컴포넌트를 만들겠습니다.

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

        const mapStyles = {
            width: '100%',
            height: '500px'
        };

        export class MapContainer extends Component {
            constructor(props) {
                super(props);
                this.state = {
                    userLocation: {
                        lat: 37.5665, // 서울의 위도
                        lng: 126.978 // 서울의 경도
                    },
                    markers: [
                        { id: 1, lat: 37.570, lng: 126.980 }, // 마커 1
                        { id: 2, lat: 37.575, lng: 126.975 }  // 마커 2
                    ]
                };
            }

            render() {
                return (
                    
                );
            }
        }

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

4. App 컴포넌트에서 MapContainer 사용하기

이제 App.js에서 MapContainer 컴포넌트를 불러와 지도 표시 기능을 추가하겠습니다.

        import React from 'react';
        import MapContainer from './components/MapContainer';

        const App = () => {
            return (
                

                    
지도 마커 추가 및 사용자 위치 표시하기
                    
                
            );
        };

        export default App;
        

5. 사용자 위치 가져오기

이제 사용자의 실제 위치를 가져오는 기능을 추가하겠습니다. 사용자의 위치를 가져오기 위해 Geolocation API를 사용할 수 있습니다.

        componentDidMount() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(position => {
                    this.setState({
                        userLocation: {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        }
                    });
                });
            }
        }
        

6. 마커 및 아이콘 스타일링하기

구글 맵스에서 제공하는 마커 아이콘 외에 사용자 정의 아이콘을 사용하려면 URL을 통해 사용자 정의 이미지를 사용할 수 있습니다. 아래와 같이 각 마커의 아이콘 속성을 수정하여 원하는 아이콘으로 변경할 수 있습니다.

        icon={{
            url: 'https://example.com/my-custom-marker.png',
            scaledSize: new window.google.maps.Size(40, 40) // 크기 조정
        }}
        

추가적으로 CSS를 통해 마커의 기본 스타일을 조정할 수 있습니다. 다만, 구글 맵스에서 마커 스타일을 직접 CSS로 조정하기는 어렵기 때문에 주로 아이콘 이미지를 사용하는 방법이 일반적입니다.

7. 전체 코드 리뷰

모든 코드를 정리해서 최종적으로 보이는 모습은 다음과 같습니다.

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

        const mapStyles = {
            width: '100%',
            height: '500px'
        };

        export class MapContainer extends Component {
            constructor(props) {
                super(props);
                this.state = {
                    userLocation: {
                        lat: 37.5665,
                        lng: 126.978
                    },
                    markers: [
                        { id: 1, lat: 37.570, lng: 126.980 },
                        { id: 2, lat: 37.575, lng: 126.975 }
                    ]
                };
            }

            componentDidMount() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(position => {
                        this.setState({
                            userLocation: {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude
                            }
                        });
                    });
                }
            }

            render() {
                return (
                    
                );
            }
        }

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

8. 결론

이 강좌에서는 리액트 프로젝트에서 지도에 마커를 추가하고, 사용자의 위치를 표시하는 방법에 대해 다루어 보았습니다. 사용자 위치를 동적으로 가져오고, 마커와 아이콘 스타일링을 통해 보다 직관적인 사용자 경험을 제공할 수 있습니다. 이 기능들을 활용하여 더 많은 위치 기반 서비스를 개발해 나가시길 바랍니다!