여행기획 2탄! 구글맵 기반 해외 서비스 사례와 API 파헤치기!

어느덧 벚꽃이 만개한 4월 첫째날입니다. 지난 포스팅에서 코로나 19 백신 접종이 시작하면서 여행사 산업에 대한 기대감이 도입 짐에 따라 국내 여행사의 Google 지도를 활용한 서비스 플랫폼들을 소개해 드렸습니다. 이번 포스팅에서는 Google 지도를 활용한 해외 사례를 공유해보고자 합니다.

해외 여행산업에서 Google 지도의 활용 성공 사례로 소개된 서비스들이 어떤 것인지 살펴보고자 합니다. 우리에게는 생소한 여행 플랜 플랫폼이 어떻게 Google 지도 API를 활용하는지도 함께 설명해드리고자 합니다. 

 

Tripping

Tripping은 전 세계 150,000 개 이상의 도시에서 1,000 만개 이상의 휴가 용 렌탈 서비스를 제공하는 검색 엔진 기반의 온라인 여행 서비스입니다. HomeAway, VRBP, TripAdvisor, Booking.com 등 18 개 이상의 파트너와의 연동을 통해 다양한 사용자 정의 필터, 비교, 정렬을 통해 선호하는 숙소를 검색 할 수 있도록 도와줍니다.

Google은 Tripping의 방문자를 게스트로 전환하기위한 최상의 인터페이스를 제공하는 가장 저렴한 매핑지도 솔루션입니다. user- 구글지도의 핀을 생성 하여 나열된 여행 사이트의 정보와 함께 각 상품의 사진 을-display하며, 장소 API 통해 user-의를 검색 기준에 맞게지도를 자동으로 확장 하도록 도와줍니다.

이를 통해 페이지 방문 트래픽은 2,918 % 증가하여 매월 2 백만명 이상의 순 방문자가 발생하고, 1 년 이상의 순 방문자가 발생하고 2,390 %가 증가했습니다.

화살표를 클릭하면 좌우로 이미지가 이동합니다.

 

장점

  • 호텔, 레지던스 등의 일반숙박업과 함께 에어비앤비와 같은 개인 렌탈 사업자의 숙소도 함께 제공
  • 한국어를 포함한 26개 언어 제공
  • 상세한 필터 검색 도구 제공
  • 예약이 확정되어야 정확한 위치정보를 제공하는 에어비앤비와 달리 예약 확정을 하지 않아도 숙소의 위치가 정확하게 지도에 표시됨

단점

  • 지도의 확대/축소 도구를 지도의 컨트롤 버튼으로만 제공하여 마우스 휠 컨트롤이 제공되었으면 함
  • 선택 위치 거리단위 또는 차량기준 이동시간 반경을 설정해야 지도에 결과가 반영됨

 

Nacesty

2004년에 시작된 NaCesty.cz는 30개 이상의 독일 여행사, 항공사 및 여러 호텔 리뷰 서비스를 사용하여 웹 사이트를 통해 전 세계 휴양지로의 여행을 예약합니다.

회사가 설장함에 따라 경쟁사보다 더 나은 서비스를 제공하기를 원했고, 이를 위해 고객이 예약 전에 목적지의 호텔 위치를 확인하고 가장 편리한 출발 공항을 선택할 수 있도록 도와주는 지도 플랫폼이 필요했습니다.

NaCesty,cz은 2015년에 구글맵 플랫폼을 선택했는데, 이는 구글맵 플랫폼이 전 세계 위치에 대한 가장 완벽한 매핑 커버리지를 제공하고 있으며, 고객들은 이미 구글맵 플랫폼에 익숙하기 때문이라고 관계자는 답했습니다.

NaCesty.cz은 Maps JavaScript API를 사용하여 웹 사이트를 구축하고 고객에게 호텔위치를 포함한 지도에서 목적지를 보여주고 JavaScript API의 Autocomplete는 고객이 목적지와 집 위치를 선택하는데 도움이 됩니다. 고객이 인근 공항으로 이동할 수 있도록 Directions API를 사용하고, Distance Matrix API를 사용하여 집과 출발 공항 사이의 거리와 시간을 계산하여 가장 가까운 공항을 선택할 수 있도록 합니다.

이를 통해 매년 980,000명이 NaCesty.cz 웹 사이트에 방문하고, 2016년에는 4,500명 이상이 NaCesty.cz를 통해 여행 예약 고객을 창출하였습니다.

 

장점

  • 리뷰평점, 리뷰개수, 해변까지 거리, 사용유형, 수영장, 대상유형, 해변에서 활동, 스포츠 활동, 공항에서 거리, 스파, 애완동물, 레스토랑, 골프, 미용센터, 도시 거리, 정류장 거리 등 다양한 필터링 제공
  • 자전거 라이딩 여행과 같은 특색 있는 여행 패키지 제공
  • 지도상에서 원하는 호텔만 선택하여 나만의 리스트 제작
  • 호텔 and 항공권 검색 시 공항에서 호텔까지의 이동루트가 지도에 표시

단점

  • 주변 관광명소, 쇼핑몰, 맛집 정보가 함께 표시되지 않아 아쉬움

 

Journy

Journy는 모든 사람이 액세스할 수 있는 맞춤형 여행 계획을 제공하는 플랫폼입니다. 호텔과 관광을 넘어 조식부터 석식, 사용자 맞춤형 관심 여행지, 렌터카 및 대중교통에 대한 여정을 전문 여행 디자이너와 함께 계획을 세우고 예약까지 가능합니다.

Journy의 설립자 Susan은 자신에게 제한된 휴가를 최대한 활용하기 위해 여행을 계획하는데 40개가 넘는 웹 사이트를 방문하면서 10시간 이상 소비되는 시간을 할애할 수 없었습니다.

Journy는 2015년 지역적이고 진정한 경험을 원하는 밀레니얼 세대를 타깃대상으로 하여 상세한 설문조사를 통해 고객의 취향과 목적에 맞는 여행을 계획할 수 잇는 플랫폼으로 탄생하게 되었습니다.

Maps JavaScript API를 사용하여 웹사이트를 구축하고 호텔에서부터 레스토랑, 미술관까지 장소정보와 Directions API로 대중교통부터 도보까지 경로정보를 안내받습니다.

Journy를 사용한 여행자의 92%는 Journy의 여행 플랫폼을 친구에게 추천할 의향이 있다고 답했으며, 2016년부터 현개까지 8,000개가 넘는 여행 계획 서비스를 제공하고 있습니다.

Journy의 재미있는 맞춤형 여행 컨시어지 서비스를 함께 보실까요?

화살표를 클릭하면 좌우로 이미지가 이동합니다.

현재는 해외 여행이 불가능한 관계로 저는 발리여행을 위한 샘플 정보를 받았습니다.

 

Journy는 모바일을 통한 서비스 안내도 하고 있습니다. 각 날짜별로 계획된 다양한 정보가 구글 지도와 함께 제공됩니다. 모바일에는 오프라인에서도 이용할 수 있는 일정표가 저장됩니다.

 

Google Maps Platform API

지금까지 구글맵 기반으로 서비스를 운영 중인 해외 성공 사례들을 몇 가지 살펴봤습니다. 해당 성공 사례들에서는 다양한 구글맵 API를 사용했는데요, 여행 서비스에서 사용하면 좋을 것 같은 구글 맵 API 기능들을 예제와 함께 소개해드리도록 하겠습니다.

 

Map Control Option

구글맵 API는 다양한 지도 컨트롤 옵션을 제공하고 있습니다. 위에서 소개해드린 Tripping의 지도는 지도의 확대/축소가 버튼 클릭으로만 가능하고, 마우스 휠을 통해서는 불가했습니다. 이러한 마우스 휠을 통한 지도 확대/축소 옵션은 아래의 코드로 간단하게 설정할 수 있습니다. 마우스 휠 옵션을 기본 값이 true로 활성화 되어 있습니다.

map = new google.maps.Map(document.getElementById('map'), {
       center: {lat: 37.521529, lng: 126.924165},
       zoom: 10,
       scrollwheel: true
});

지도 생성 시에 인력한 옵션을 지도를 생성한 후에도 setOptions() 함수를 통해 언제든지 수정할 수 있습니다.

map.setOptions({scrollwheel: true});

그 밖에 지도 드래그 이동, 더블 클릭 확대와 지도 위에 나타나는 컨트롤러 제거 등 옵션을 설정할 수 있습니다. 아래 샘플 지도 화면을 통해 구글 지도에서 어떤 옵션을 설정할 수 있는지 확인할 수 있습니다.

 

45º Image Map

구글맵 API에서는 다양한 유형의 지도를 제공하고 있습니다. 그 중 재밌게 볼 만한 특이한 지도로는 45º 이미지 지도가 있습니다. 지도 유형을 위성 지도로 설정하고 지도의 기울기를 45도로 지정해 나타낼 수 있는 지도로, 마치 위에서 내려다 보는 것과 같은 느낌을 줘서 사용자들의 흥미를 유발할 수 있는 재밌는 지도입니다.

function initMap() {
       const map = new google.maps.Map(
             document.getElementById("map"),
             {
                    center: { lat: 40.76, lng: -73.983 },
                    zoom: 15,
                    mapTypeId: "satellite",
              }
       );
       map.setTilt(45);
}

 

Map Localizing

구글맵 API는 지도의 언어와 리전을 선택하여 사용할 수 있습니다. 언어를 선택할 경우 지도 위에 나타나는 라벨의 언어가 변경되고, 리전을 선택할 경우 국가간 분쟁으로 인행 논란이 될 수 있는 지리 표기가 변경될 수 있습니다.

언어와 리전은 Google Maps JavaScript API 라이브러리를 사용할 때 아래와 같이 파라미터를 넣어 간단하게 변경할 수 있습니다.

https://maps.googleapis.com/maps/api/js?key=${API 키}&language=${언어 코드}&region=${리전 코드}&callback=initMap

리전은 ISO 3166-1 코드를 기준으로 입력하면 되고, 언어는 아래 링크에서 구글에서 지원하는 언어 코드를 입력해 사용하시면 됩니다.

https://developers.google.com/maps/faq#languagesupport

언어와 리전이 변경되었을 때 지도가 어떻게 변화하는지는 아래 샘플 지도로 확인할 수 있습니다.

 

Autocomplete

여행 서비스에서 장소 검색을 위한 자동완성은 빼놓을 수 없는 기능입니다. 구글맵 API에서는 간단한 코드로 자동완성 UI를 구현할 수 있도록 Autocomplete Widget 기능을 제공하고 있습니다.

해당 기능을 이용하기 위해서는 Places API 사용 설정을 한 후 Maps JavaScript API를 로드할 때 아래와 같이 라이브러리 파라미터에 “places”라는 값을 지정해야 합니다.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=${API 키}&libraries=places&callback=initMap"> </script>

places 라이브러리 사용 설정을 다 하셨다면 아래 코드로 간단하게 자동완성 UI를 구현할 수 있습니다.

const options = {
       fields: ["formatted_address", "geometry", "name"],
       origin: map.getCenter(),
       strictBounds: false,
       types: ["establishment"],
};

const autocomplete = new google.maps.places.Autocomplete(document.getElementById(‘input’), options);

각 옵션에 대한 설명은 아래와 같습니다.

  • fields: 장소를 선택했을 때 가져올 장소 정보
  • origin: 장소까지의 거리를 계산하기 위한 시작점입니다.
  • strictBounds: 결과 값을 현재 뷰 포트로만 제한할지에 대한 옵션입니다

자동완성은 최대 5개까지 유사한 장소를 리스트에 나타내주고 해당 리스트에서 하나의 장소를 선택할 경우 ‘place_changed’ 이벤트가 발생합니다.

‘place_changed’ 이벤트를 통해 사용자가 리스트에서 장소를 하나 선택했을 경우 어떤 동작을 할 것인지에 대해 선택한 장소의 상세 정보를 Place Details로 가져와 기능을 구현할 수 있습니다.

const autocomplete = new google.maps.places.Autocomplete(input, options);

autocomplete.addListener("place_changed", () => {
       const place = autocomplete.getPlace(); // 선택된 장소의 상세 정보
});

Autocomplete Widget은 input element만 있으면 간단하게 구현 가능한 것으로 디자인을 어떻게 하느냐에 따라 아래와 같은 다양한 모양으로 장소 검색 창을 구현할 수 있습니다.

화살표를 클릭하면 좌우로 이미지가 이동합니다.

 

Autocomplete Widget을 사용할 경우 자동완성 세션이 생성되어 만일 사용자가 리스트에서 장소를 선택할 경우 Place Details이 사용되어 해당 자동 완성에 대한 요금은 0원이 되고 Place Details에 대한 요금만 부과됩ㄴ디ㅏ. 만일 사용자가 리스트에서 장소를 선택하지 않았을 경우에는 자동 완성에 대한 요금만 부과됩니다.

자동완성 세션에 대한 자세한 내용은 아래 구글맵 공식 문서를 참고 부탁드립니다.

https://developers.google.com/maps/documentation/places/web-service/autocomplete#session_tokens

 

아래는 Autocomplete Widget을 사용한 예제입니다.

Directions API

Directions API는 길찾기 정보를 제공하는 API입니다. 단순히 출발지와 목적지 사이의 길찾기 정보만 제공하는 것이 아니라 경유지 최적화, 이동 수단 선택, 교통 상황 반영 등 여러 옵션을 적용하여 경로를 검색할 수 있습니다. 아래는 각 옵션에서 제공하는 기능입니다.

1. 경유지

최대 25개의 경유지를 지정할 수 있으며, 최적화 옵션을 통해 경유지 입력 순서에 상관 없이 최적의 경로 정보를 제공받을 수 있습니다.

2. 이동 수단 선택

자동차, 도보, 자전거, 대중교통 4가지의 이동 수단을 선택할 수 있습니다. 선택된 이동 수단에 따른 최적 경로 정보가 제공됩니다. 대중교통의 경우 추가적으로 출발 시간 또는 도착 시간 정보를 입력하여 이동 예정 시각에 맞는 경로를 찾을 수 있습니다.

3. 교통 상황 반영

자동차 모드인 경우 출발 시간 정보를 입력하면 예정 시각의 교통 상황을 반영한 경로 정보가 제공됩니다.

 

위의 옵션은 Maps JavaScript API에서 DirectionsService 클래스를 통해 아래와 같이 설정할 수 있습니다.

directionsService.route(
       {
              origin: document.getElementById("start").value,
              destination: document.getElementById("end").value,
             waypoints: waypts,
             optimizeWaypoints: document.getElementById('opt').checked,
             travelMode: google.maps.TravelMode.DRIVING,
             drivingOptions: {
             departureTime: new Date(),
             trafficModel: 'pessimistic'
             },
       },
...

아래는 경유지를 선택하여 경로 검색 후 지도 위에 시각화하는 기능을 구현한 예제입니다.

Mobile APP Navigation

구글맵 API에서는 모바일 앱에서 Google지도 앱을 호출해 네비게이션 기능을 이용할 수 있도록 기능을 제공합니다.

이 기능은 Google지도 앱을 호출해서 사용하는 것으로 따로 API를 사용하는 것이 아니므로 비용이 청구되지 않아 무료로 사용할 수 있습니다. 또한 개발한 모바일 앱 내에서 네비게이션 기능이 제공되는 것이 아닌 별도 Google지도 앱을 호출해서 네비게이션 기능을 제공한다는 점에 유의해야 합니다.

 


SPH는 Maxar Technologies, Google Maps, SuperMap 등 다양한 케이스에 존재하는 다양한 제품군을 보유하고있는 고객의 사례에 꼭 맞는  무료 세미나 및 인적 컨설팅 을 제공하고 있습니다. 각 케이스에 더욱 자세한 이야기를 나누고 싶으 시다면,  여기 에서 문의 주시길 바라며, SPH에서 발행하는  GIS / 로케이션 인텔리전스 관련 최신 소식 을 받아보고 싶으신 분들은  페이스 북 페이지  또는  뉴스 레터 를 구독 해 주시길 바랍니다. 감사합니다.