Colin's Blog
[react] 지도에서 쇼핑몰 및 상점 정보 표시하기

React 앱에서 지도 상에 쇼핑몰이나 상점과 같은 장소의 정보를 표시하는 기능을 구현하는 방법에 대해 알아보겠습니다. 이를 위해 Google Maps API와 Google Places API를 활용하여 지도 위에 마커로 상점 정보를 표시하고, 클릭 이벤트를 통해 상세 정보를 확인할 수 있는 기능을 구현할 것입니다.

목차

프로젝트 설정

먼저, React 프로젝트를 생성하고 필요한 라이브러리를 설치합니다.

npx create-react-app map-app
cd map-app
npm install google-maps-react

Google Maps 및 Places API 설정

Google Cloud Console에서 Maps JavaScript API 및 Places API를 활성화하고 API 키를 생성합니다.

<!-- public/index.html -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

지도에 마커 표시하기

React 컴포넌트에서 Google Maps를 초기화하고, 지도 위에 마커로 상점 정보를 표시합니다.

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

class MapContainer extends React.Component {
  render() {
    return (
      <Map google={this.props.google} zoom={14}>
        <Marker name={'Current location'} />
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: process.env.REACT_APP_GOOGLE_API_KEY
})(MapContainer);

마커 클릭 이벤트 처리

마커를 클릭할 때 상점의 상세 정보를 표시할 수 있는 팝업을 구현합니다.

// 지도 클릭 이벤트 핸들러 추가
onMarkerClick = (props, marker, e) => {
  // 상점 정보 표시 로직 구현
}

<Marker onClick={this.onMarkerClick} name={'Current location'} />

이제 React 앱에서 Google Maps를 통해 쇼핑몰이나 상점 정보를 표시하고, 상세 정보를 확인할 수 있는 기능을 구현할 수 있을 것입니다.

참고 자료

위의 예시에서는 Google Maps 및 Places API를 사용하여 React 앱에서 지도 상에 쇼핑몰이나 상점 정보를 표시하는 방법을 알아보았습니다.

© 2018 Colin. All rights reserved.