[react] 지도에서 주변 장소 검색 구현하기

22 Dec 2023

react

인기 있는 지도 API인 Google Maps API를 사용하여 React 애플리케이션에 지도와 주변 장소 검색 기능을 추가하는 방법에 대해 알아보겠습니다.

지도 API 키 획득하기

먼저 Google Cloud Platform에 가입하여 API 키를 얻어야 합니다. Google Cloud Platform 콘솔에 로그인한 후 ‘프로젝트 선택’ 창에서 새로운 프로젝트를 생성하고, “지도 플랫폼”을 사용 설정한 후 “지도 JavaScript API”를 활성화하고 API 키를 생성합니다. API 키를 안전한 곳에 보관하고, React 애플리케이션에서 사용할 수 있도록 준비합니다.

React 애플리케이션 설정

React 애플리케이션을 생성하고 필요한 패키지를 설치합니다.

npx create-react-app nearby-places-search
cd nearby-places-search
npm install @react-google-maps/api

Google 지도 컴포넌트 추가하기

Google Maps API를 사용하려면 GoogleMap 및 LoadScript 컴포넌트를 사용하여 지도를 초기화해야 합니다.

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

const MapContainer = () => {
  const mapStyles = {
    height: "100vh",
    width: "100%"
  }

  const defaultCenter = {
    lat: 41.3851, lng: 2.1734
  }

  return (
    <LoadScript
      googleMapsApiKey={YOUR_API_KEY}
    >
      <GoogleMap
        mapContainerStyle={mapStyles}
        zoom={13}
        center={defaultCenter}
      />
    </LoadScript>
  )
}

export default MapContainer;

이제 MapContainer 컴포넌트를 앱에 추가하여 지도를 표시할 수 있습니다.

주변 장소 검색 추가하기

Google Places API를 사용하여 주변 장소를 검색하려면 PlacesService 객체를 사용해야 합니다. 이를 통해 지도와 상호작용하고 검색 요청을 보낼 수 있습니다.

import React, { useEffect } from "react";
import { useLoadScript } from "@react-google-maps/api";

const NearbyPlacesSearch = () => {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: YOUR_API_KEY
  });

  useEffect(() => {
    if (isLoaded) {
      // PlacesService를 이용한 주변 장소 검색 로직 추가
    }
  }, [isLoaded]);

  return (
    <div>
      {/* 주변 장소 검색 UI 추가 */}
    </div>
  );
};

export default NearbyPlacesSearch;

NearbyPlacesSearch 컴포넌트에서는 userLoadScript 훅을 사용하여 Google Maps API를 로드하고, 이후 useEffect를 사용하여 API 로드가 완료된 후 주변 장소를 검색하는 로직을 추가합니다.

결론

이제 React 애플리케이션에 구글 지도와 주변 장소 검색 기능을 추가하는 방법에 대해 알아보았습니다. API 키를 획득하고, 필요한 패키지를 설치하여 지도를 초기화한 후, PlacesService를 사용하여 주변 장소를 검색하는 기능까지 구현할 수 있습니다.