[개인] DLD Project (3) - Google map Autocomplete 외

틀린 내용이 있을 수 있습니다.
발견하시면 말씀 부탁드립니다! 🙇

---

https://www.linkedin.com/company/javascript-developer/

 

Google Map API 연동 작업

1. React 환경에서 Google palce API 사용
googlemaps/react-wrapper 설치 후, Wrapper 컴포넌트를 사용한다. 해당 컴포넌트를 가장 바깥쪽에 두어야 하위 컴포넌트에서 google map API를 정상적으로 사용할 수 있다. Wrapper의 apiKey 프로퍼티에는 구글 프로젝트 생성 시 발급된 API Key를 입력하면 되고, libraries 프로퍼티에는 추가적으로 사용하는 라이브러리를 입력하면 된다.

import { Wrapper } from '@googlemaps/react-wrapper';

...

const App = () => {
  return (
    <Wrapper apiKey={API_KEY} libraries={['places']}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/main" element={<Main />} />
          <Route path="/about" element={<About />} />
          <Route path="/mypage" element={<MyPage />} />
        </Routes>
      </BrowserRouter>
    </Wrapper>
  );
};

...

2. Google Autocomplete
Autocomplete란 말 그대로 자동완성 기능으로서, 검색창에 검색어 입력 시 예상 검색어를 드롭다운 형식으로 보여주고, 사용자가 선택한 장소의 정보를 반환시켜 준다. 참고로 해당 기능을 사용하기 위해선 places 라이브러리를 사용해야 하기 때문에, React 환경에서는 Wrapper의 libraries 속성에 places를 추가해 준다. 그리고 구글 클라우드 콘솔에서 해당 프로젝트 내 Places API 사용 설정이 되어있는지 확인이 필요하다.

참고: https://developers.google.com/maps/documentation/javascript/place-autocomplete?hl=ko#get-started

Place Autocomplete  |  Maps JavaScript API  |  Google Developers

Autocomplete 클래스를 생성하기 위해서는 Map 클래스가 존재해야 한다. 나의 경우, 현재 위치 좌표를 알아내어 이를 Map 클래스 생성에 필요한 center 값으로 사용했다. 이다음 Autocomplete 클래스를 생성했는데 코드는 아래와 같다.

let originAutocomplete = new google.maps.places.Autocomplete(
  // 도착지 input element
  document.getElementById('dest-search'),
  {
    // 대한민국의 장소만 검색되도록 설정
    componentRestrictions: { country: 'kr' },
    fields: ['address_components', 'geometry', 'name', 'place_id'],
    // 지도 표시 영역 외 장소도 검색되도록 함
    strictBounds: false,
    // 장소 타입은 설정하지 않음으로써 모든 장소유형이 검색되도록 함
    types: [],
  },
);

3. Google Directions
Directions API를 사용하면 여러 가지 수단을 이용한 출발지~목적지까지의 경로 계산이 가능하다. 해당 기능을 사용하기 위해서 Autocomplete와 마찬가지로 구글 클라우드 콘솔에서 Directions API 사용설정을 해줘야 한다.

참고: https://developers.google.com/maps/documentation/javascript/directions?hl=ko#GetStarted

경로 서비스  |  Maps JavaScript API  |  Google Developers

 

출발지와 목적지 입력 후 검색 버튼을 클릭하면 handleSearchButton 함수가 실행되도록 했다. 코드를 보면 directionsService 외에 directionsRenderer라는 객체도 생성하는데, 이는 directionsService를 통해 반환되는 directionsResult 객체를 지도상에 렌더링 할 때 사용하기 위함이다. 

// 출발지와 도착지 입력 후 검색 버튼 클릭시 handleSearchButton 함수 실행
const handleSearchButton = () => {
  // DirectionsService 객체 생성
  const directionsService = new google.maps.DirectionsService();
  // directionsRenderer 객체 생성 (경로 결과를 지도상에 렌더링할 때 필요)
  const directionsRenderer = new google.maps.DirectionsRenderer();
  // directionsRenderer 객체와 map 객체 바인딩
  directionsRenderer.setMap(map);

  // 핸들러 함수에 directionsService, directionsRenderer 객체 전달
  calculateAndDisplayRoute(directionsService, directionsRenderer);
};

 ...

<Button onClick={handleSearchButton}>탐색</Button>

 

아래는 경로 서비스를 요청하고 결과를 렌더링 처리하는 핸들러 함수이다. 참고로 originAutocomplete이나 destAutocomplete은 Autocomplete을 통해 반환된 결과를 저장한 값이다.

const calculateAndDisplayRoute = (directionsService, directionsRenderer) => {
  // 출발지와 목적지의 place 객체 추출
  const orginPlace = originAutocomplete.getPlace();
  const destPlace = destAutocomplete.getPlace();
 
  // 경로 서비스 요청
  directionsService
    .route({
      origin: { placeId: orginPlace.place_id },
      destination: { placeId: destPlace.place_id },
      // 수단은 도보로 설정
      travelMode: 'WALKING',
    })
    .then((response) => {
      // 요청이 정상처리되면 directionsRenderer.setDirections을 통해 결과 렌더링
      directionsRenderer.setDirections(response);
    })
    .catch((e) => window.alert('Directions request failed due to : ' + e));
};

 

문제 발생

Directions 기능을 사용하는데 경로 서비스 요청 결과가 아무것도 나오지 않는 문제가 생겼다. 처음에는 코드 문제인 줄 알고 구글링을 했다. 결과부터 이야기하자면 코드 문제는 아니었고, 우리나라에서는 구글맵 경로 기능을 사용할 수 없는 이슈였다. 국내 정책상 구글은 해외기업이기 때문에 우리나라 지리 정보 데이터를 저장할 수 없으며, 그에 따라 구글에서는 우리나라 지도상에 경로를 제공하지 않는다.

https://developers.google.com/maps/coverage?hl=ko

https://developers.google.com/maps/coverage?hl=ko

Google Maps Platform 사용 범위 세부정보  |  Google Developers

https://timzertravels.com/why-doesnt-google-maps-work-in-south-korea/

Why Doesn't Google Maps Work in South Korea? - Timzer Travels

구글은 그렇다치고 네이버는 우리나라 기업이니까 경로 정보를 제공하겠지 싶어 찾아보았다. 그러나 네이버 지도 API도 자동차 경로만 제공하고 있으며, 현재(2023.02.13) 도보 경로는 제공 안 하고 있다. https://www.ncloud.com/support/faq/all/1033

NAVER CLOUD PLATFORM

카카오 지도 API도 현재(2023.02.13) 도보 경로는 제공 안 하고 있다. 카카오 맵으로 이동하는 링크를 생성해 앱이나 웹 페이지에서 지도를 노출해 도보 경로를 확인할 수 있으나, 이건 내가 원하는 게 아니기 때문에 패스했다. https://devtalk.kakao.com/t/api/73664

도보 길찾기 api

 

결론

구글/카카오/네이버를 살펴봤으나 국내 도보 경로를 제공하는 API가 없다. 내가 원했던 방향대로 진행을 못한다는 게 아쉽긴 하나 뭐 어쩌겠나. 도보 경로 데이터 제공이 될 거라 막연하게 생각한 내 잘못이지. 프로젝트 내용은 아래와 같이 수정했다.

1. 목적지 근처 5m 내에 접근하면 푸시 알림 기능 (유지)
2. 도보 경로 표시 (제외)
3. 내가 걸어 다닌 경로를 지도상에 표시 (추가)

카카오나 네이버 API에서 도보 경로를 제공했다면 API를 바꿔 진행했을 것이다. 그러나 지금 상황에서 굳이 그럴 필요가 없으니 그대로 구글 API를 이용해 프로젝트를 진행하겠다.(오히려 좋아😎)

---

참고 자료

• https://developers.google.com/maps/documentation/javascript/react-map?hl=ko#react-wrapper
• https://developers.google.com/maps/documentation/javascript/place-autocomplete
• https://developers.google.com/maps/documentation/javascript/directions?hl=ko
• https://developers.google.com/maps/documentation/javascript/directions?hl=ko#DisplayingResults
• https://developers.google.com/maps/coverage?hl=ko
• https://timzertravels.com/why-doesnt-google-maps-work-in-south-korea/
• https://www.ncloud.com/support/faq/all/1033
• https://devtalk.kakao.com/t/api/73664
• https://developers.google.com/maps/coverage?hl=ko