Google Maps Platform을 사용하면 고객은 고급 마커로 지도 마커의 시각적 디자인을 맞춤설정하여 고유한 환경을 개발할 수 있습니다. 이 문서에서는 고객이 한 단계 더 나아가 실시간 데이터를 기반으로 동적으로 변하는 마커를 만드는 방법을 살펴봅니다.
지도 마커는 사용자에게 풍부한 지도 환경을 제공하는 데 유용한 도구입니다. 크기, 색상, 모양과 같은 마커 속성은 표시된 각 위치에 대한 추가 정보를 전달할 수 있습니다. 경우에 따라 이러한 추가 정보가 동적으로 변경될 수 있으며, 개발자는 지도 시각화를 업데이트하여 사용자에게 최신 상태를 유지하고 싶을 수 있습니다.
이 도움말에서는 설명 용도로 예시를 사용합니다. 소매 체인점이 지도를 사용하여 사용자에게 매장 대기 시간을 표시하려고 합니다. 그러나 동일한 아키텍처를 다른 많은 사용 사례에도 사용할 수 있습니다. 다음은 몇 가지 추가적인 아이디어입니다.
- 호텔 객실 이용 가능 여부: 호텔 검색결과를 표시하는 지도에서, 객실 이용 가능 여부는 중요한 신호로, 재고 감소에 따라 사용자가 호텔을 예약하도록 유도하는 중요한 신호입니다.
- 주차 공간 사용 가능 여부: 주차장 지도에서 사용자가 도착할 때 주차 공간이 있는 목적지를 확신을 가지고 선택할 수 있도록 합니다.
- 레스토랑 영업 중, 영업 종료, 폐업: 음식점 검색결과가 표시된 지도에서는 사용자가 음식점에 도착했을 때 영업을 종료했는지 여부를 알 수 있어야 합니다.
동적 고급 마커 솔루션
이제 고급 마커를 사용하여 동적 데이터를 시각화하는 지도를 만드는 방법을 살펴보겠습니다. 앞서 언급했듯이 이 사용 사례는 사용자의 대기 시간을 예측하고 시각화하기 위해 결제 대기열 관리 시스템을 활용하는 소매 체인점입니다. 애플리케이션 아키텍처는 다음과 같습니다.
1단계 - 시각적 경험을 정의하기 위한 속성 결정
첫 번째 단계는 사용자에게 표시할 하나 이상의 위치 속성을 결정하는 것입니다. 이 경우에는 각 매장 위치에서의 현재 대기 시간(분 단위로 측정)이라는 하나의 속성만 표시합니다.
다음 단계는 해당하는 마커 속성을 하나 이상 선택하여 지도 마커의 대기 시간을 시각적으로 표시하는 것입니다. 마커 속성 목록은 PinElement 사양에서 즉시 사용할 수 있습니다. 맞춤 HTML을 사용하면 더욱 풍부한 맞춤설정 옵션을 사용할 수 있습니다.
이 예에서는 두 개의 마커 속성을 사용하여 대기 시간 데이터를 시각화합니다.
- 마커 색상: 대기 시간이 5분 미만인 경우 파란색, 5분 초과인 경우 노란색으로 표시됩니다.
- 마커 콘텐츠(맞춤 HTML 마커 필요): 마커 자체에 현재 대기 시간(분)이 포함됩니다.
2단계 - 실시간 데이터 소스에 대한 연결 구성
데이터 소스에 연결하는 방법에는 여러 가지가 있으며 올바른 솔루션은 사용 사례와 기술 인프라에 따라 다릅니다. 이 예에서는 HTTP 요청 (REST)을 통해 업데이트된 대기 시간 데이터를 정기적으로 요청하는 pull 접근 방식을 사용합니다. 다음 섹션에서는 푸시 접근 방식을 활용하는 대체 아키텍처를 살펴봅니다.
애플리케이션이 서버의 대기 시간 데이터에 액세스할 수 있도록 Google의 아키텍처는 Firebase용 Cloud Functions를 활용합니다. Cloud Functions를 사용하면 이 데이터에 액세스하고 계산할 백엔드 함수를 정의할 수 있습니다. 또한 웹 애플리케이션에 Firebase 라이브러리가 포함되어 HTTP 요청을 통해 Cloud 함수에 액세스할 수 있습니다.
다음 단계는 사용자를 위해 데이터를 최신 상태로 유지하는 것입니다. 이를 위해 시간 제한 30초와 함께 JavaScript setInterval 함수를 사용하여 타이머를 설정합니다. 타이머가 트리거될 때마다 위에 설명된 대로 업데이트된 대기 시간 데이터를 요청합니다. 새 데이터를 받으면 지도 마커의 모양을 새로고침해야 합니다. 다음 단계에서는 이러한 변경사항을 적용하는 방법을 자세히 설명합니다.
3단계 - 지도 마커 렌더링
이제 고급 마커를 사용하여 스타일 지정된 마커를 지도에 렌더링할 수 있습니다. Google Maps Platform의 Maps JavaScript API로 만든 지도에 고급 마커를 렌더링할 수 있습니다. 고급 마커를 사용하는 경우 JS 지도 요청에 지도 ID 매개변수를 포함해야 합니다.
아래의 코드 스니펫에서는 마커를 만들고 HTML div 요소를 만들어 마커의 콘텐츠를 정의합니다.
// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");
// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
content: storeWaitLabels[store_index]
}));
마지막 단계는 각 매장의 마커 텍스트와 CSS 스타일을 업데이트하는 것입니다. 아래 코드는 업데이트된 대기 시간 데이터를 읽고 대기 시간을 기준으로 각 매장 핀에 스타일을 할당합니다.
// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
else storeWaitLabels[store_index].className = "wait-under-5";
이제 지도에서 기존 대기 시간 API를 사용하여 사용자의 최신 대기 시간을 시각화합니다.
실시간 데이터 소스에 연결하는 대체 방법
실시간 데이터 소스에 연결하는 방법은 다양합니다. 아래에서는 두 가지 대체 옵션인 Firebase 클라우드 메시징과 Websockets를 살펴봅니다. 어떤 방법을 선택하든 지도 도구의 성능을 유지하려면 다음 요소를 고려해야 합니다.
- 업데이트 빈도
- 데이터 볼륨
- 지도 보기의 마커 수
- 하드웨어 및 브라우저 기능
Firebase 클라우드 메시징
Firebase 클라우드 메시징은 푸시 방식입니다. 이 방법을 사용하면 백엔드에서 대기 시간 데이터가 업데이트될 때마다 지도 애플리케이션에 업데이트를 전송합니다. 업데이트 메시지는 마커 모양과 콘텐츠를 업데이트하는 것이 목적인 콜백 함수를 트리거합니다.
이 아키텍처를 선택하기 전에 고려해야 할 한 가지는 지도 애플리케이션을 실행하는 각 브라우저에 대해 지속적인 서버 연결을 유지해야 한다는 것입니다. 따라서 실행 비용이 더 많이 들고 연결 문제의 맥락에서 성능이 떨어질 수 있습니다.
WebSockets
WebSockets은 데이터를 최신 상태로 유지하는 또 다른 푸시 기반 접근 방식입니다. 이전 시나리오와 마찬가지로 WebSocket을 사용하여 백엔드와 지도 애플리케이션 사이에 영구 연결을 설정할 수 있습니다. 이 접근 방식의 장점은 기본적으로 Firebase 클라우드 메시징과 비슷하지만, 필요한 인프라를 구성하기 위해 추가 작업이 필요할 수 있습니다.
결론
개발자는 실시간 데이터 소스를 고급 마커와 결합하여 Google 지도에서 직관적인 시각화를 만들 수 있습니다. 이러한 데이터 소스는 지도 요구사항, 사용자 하드웨어 및 브라우저, 데이터 볼륨에 따라 여러 가지 방법으로 연결할 수 있습니다. 그런 다음 통합된 데이터를 사용하여 실시간으로 고급 마커의 디자인을 제어할 수 있으므로 사용자에게 동적 경험을 제공할 수 있습니다.
다음 작업
추가 자료:
기여자
주요 저자:
Jim Leflar | Google Maps Platform 솔루션 엔지니어
존 브래니건 | Google Cloud Platform 선임 고객 엔지니어
스티브 바렛 | Google Maps Platform 솔루션 엔지니어