이 페이지는 Cloud Translation API를 통해 번역되었습니다.

장소 UI 키트란 무엇이며 이를 사용하여 참여도 높은 솔루션을 빌드하려면 어떻게 해야 하나요?

소개

전 세계 수백만 명의 사용자에게 Google 지도는 정확하고 최신 장소 정보를 제공하는 주요 소스입니다. 사용자 리뷰, 사진, 평점을 비롯해 전 세계 2억 5천만 개가 넘는 장소에 대한 Google의 풍부한 데이터베이스는 비교할 수 없는 수준의 세부정보와 신뢰를 제공합니다. 최신의 사실 데이터를 제공하기 위해 Google은 매일 지도에 1억 건의 업데이트를 적용합니다.

장소 UI 키트는 바로 사용할 수 있는 비용 효율적인 구성요소 라이브러리로, Google 지도의 광범위한 장소 정보를 기반으로 합니다. 이를 통해 신뢰할 수 있고 익숙한 Google의 장소 환경을 원하는 지도의 프런트엔드 사용 사례에 통합할 수 있습니다.

구성요소

장소 UI 키트는 독립적으로 또는 함께 사용하여 원활한 장소 환경을 만들 수 있는 개별 UI 구성요소 집합을 제공합니다.

장소 세부정보: 이 구성요소는 장소의 이름, 주소, 전화번호, 웹사이트, 영업시간, 사용자 리뷰 등 장소에 관한 세부정보를 렌더링합니다.
장소 검색: 이 구성요소는 카테고리별로 또는 자유 텍스트 검색을 통해 주변 장소 목록을 표시합니다.
기본 장소 자동 완성: 이 구성요소는 텍스트 입력란을 만들어 입력과 일치하는 예상 장소의 드롭다운 목록을 표시합니다.

장소 UI 키트의 주요 이점

사용 편의성: 최소한의 코드로 Google의 신뢰할 수 있는 장소 사용자 환경을 앱에 통합합니다.
모든 지도에서 사용: 이제 Google 이외의 지도에서도 장소 콘텐츠를 사용할 수 있습니다.
친숙한 UI: 구성요소는 Google 지도 환경과 일관된 사용자 인터페이스를 제공하므로 사용자에게 직관적입니다.
맞춤설정: Places UI Kit은 추가 비용 없이 광범위한 시각적 맞춤설정 옵션을 제공합니다. 다양한 설정과 맞춤 CSS 속성을 사용하여 디스플레이 요소를 구성할 수 있습니다.
비용 효율성: 장소 UI 키트는 Places API를 직접 사용하는 것보다 비용 효율적인 솔루션이 될 수 있습니다.

실제 사용 사례

장소 UI 키트는 다양한 애플리케이션에서 사용자 환경을 개선하는 데 사용할 수 있습니다.

지역 검색 애플리케이션: '할 일' 애플리케이션은 장소 검색 구성요소를 사용하여 근처 음식점, 카페 또는 명소 목록을 표시할 수 있습니다. 사용자가 목록에서 장소를 선택하면 장소 세부정보 구성요소를 사용하여 해당 위치에 관한 자세한 정보를 표시할 수 있습니다.
여행 계획 애플리케이션: 여행 애플리케이션은 장소 검색을 사용하여 사용자가 특정 도시의 호텔이나 관심 장소를 검색할 수 있도록 지원합니다. 그런 다음 장소 세부정보 구성요소에서 각 위치의 사진, 평점, 리뷰를 표시하여 계획을 세울 수 있습니다.
부동산 및 부동산 검색 포털: 부동산 애플리케이션은 장소 검색 구성요소를 사용하여 잠재적 주택 구매자나 임차인이 방문을 예약하기 전에 주변 지역의 라이프스타일을 이해할 수 있도록 다양한 카테고리의 주변 장소를 표시할 수 있습니다.
메시지 및 소셜 미디어 애플리케이션: 메시지 및 소셜 미디어 애플리케이션은 장소 검색을 사용하여 사용자가 모임 장소를 쉽게 찾을 수 있도록 근처 장소를 검색하고 추천할 수 있습니다. 장소 세부정보 구성요소를 사용하면 사용자가 장소를 공유할 때 풍부한 장소 정보를 표시할 수 있습니다. 사용자는 미리 빌드된 Google 지도 버튼을 사용하여 Google 지도에서 추가 위치와 여행 정보를 쉽고 정확하게 탐색할 수 있습니다.

맞춤설정

Places UI 키트 구성요소의 콘텐츠 풍부도와 스타일은 필요에 맞게 맞춤설정할 수 있습니다.

장소 세부정보 구성요소의 CSS 속성과 같은 맞춤 CSS 속성을 사용하면 애플리케이션의 디자인에 맞게 구성요소의 디자인을 조정할 수 있습니다. 색상, 글꼴, 기타 시각적 요소를 맞춤설정할 수 있습니다. 시각적 수정 시 저작자 표시 요구사항을 준수하는 것이 중요합니다. 예를 들어 --gmp-mat-color-primary CSS 속성을 사용하여 링크 및 리뷰 수에 사용되는 기본 색상을 변경할 수 있습니다.

중첩된 gmp-place-content-config 요소를 사용하여 표시되는 특정 장소 콘텐츠를 제어하여 콘텐츠를 선택하고 구성하거나 gmp-place-all-content를 사용하여 사용 가능한 모든 콘텐츠를 표시할 수 있습니다.

문서에서 다양한 스타일 구성을 시각화하는 데 도움이 되는 맞춤설정 도구를 사용할 수 있습니다.

구현 가이드

장소 UI 키트는 Maps JavaScript와 Places SDK for Android 및 iOS에서 사용할 수 있습니다.

시작하기

장소 UI 키트를 사용하려면 다음 단계를 따라야 합니다.

Google Cloud 프로젝트 설정: Places UI Kit를 사용하려면 결제 계정이 있는 Cloud 프로젝트가 필요합니다.
장소 UI 키트 사용 설정: 프로젝트에 장소 UI 키트를 사용 설정해야 합니다.
API 키 가져오기: 요청을 인증하려면 API 키가 필요합니다.

플랫폼별 자세한 내용은 JavaScript, Android, iOS의 Places UI Kit 시작 안내를 참고하세요.

구현 예시

다음은 동적 JavaScript 지도로 장소 검색 및 장소 세부정보를 구현하는 예입니다. 사용자는 자유 텍스트를 기반으로 주변 장소를 검색할 수 있습니다. 검색 결과 목록에서 장소를 클릭하면 장소 세부정보 구성요소가 동적 지도에 표시됩니다.

아래는 코드 스니펫입니다. 이 GitHub 저장소에서 데모와 전체 코드를 확인할 수 있습니다.

시작하기 전에 JavaScript와 관련된 위의 시작하기 단계를 완료해야 합니다.

HTML에서 필요한 라이브러리를 로드합니다.

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

HTML에서 지도 컨테이너, 텍스트 입력 필드, 검색 버튼을 추가합니다. 이 지도 컨테이너는 JavaScript에서 생성될 동적 지도를 보유합니다. 입력 상자를 사용하면 사용자가 검색어를 입력할 수 있습니다.

<div id="map-container"></div>
<div class="controls">
    <input type="text" class="query-input" />
    <button class="search-button">Search</button>
</div>

장소 검색 구성요소를 추가합니다. 장소 검색 구성요소는 가로 및 세로 레이아웃을 제공합니다. 이 예에서는 가로 레이아웃을 사용합니다. 'selectable' 속성을 사용하면 검색 결과 목록 항목을 클릭할 수 있습니다 (클릭하면 gmp-select 이벤트가 트리거됨).

gmp-place-search 요소 내에 두 개의 하위 요소를 추가합니다.

gmp-place-all-content는 사용 가능한 모든 콘텐츠를 표시하는 데 사용됩니다.
gmp-place-text-search-request는 장소 검색 요소를 구성하는 데 사용됩니다.

이 예에서는 JavaScript에서 구성을 설정합니다.

<div class="list-container">
    <gmp-place-search orientation="horizontal" selectable>
         <gmp-place-all-content></gmp-place-all-content>  
         <gmp-place-text-search-request></gmp-place-text-search-request>
    </gmp-place-search>
</div>

다음으로, 콤팩트 및 전체 레이아웃에서 사용할 수 있는 장소 세부정보 구성요소를 추가합니다. 각 레이아웃은 세로 및 가로 방향을 지원합니다. 이 예시에서는 콤팩트 가로 레이아웃을 사용합니다. 장소 검색 구성요소와 마찬가지로 두 개의 하위 요소를 추가합니다.

gmp-place-all-content는 사용 가능한 모든 콘텐츠를 표시함을 나타냅니다.
gmp-place-details-place-request은 장소를 선택하는 데 사용됩니다.

이 예에서는 JavaScript에서 장소를 설정합니다.

<div id="details-container">
     <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request> 
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact> 
</div>

JavaScript에서 이 예시에 필요한 라이브러리를 가져옵니다. 장소 라이브러리는 JavaScript용 장소 UI 키트 라이브러리를 가져옵니다.

const {Map} = await google.maps.importLibrary("maps");
await google.maps.importLibrary("places");
({AdvancedMarkerElement} = await google.maps.importLibrary("marker"));
({LatLngBounds, LatLng} = await google.maps.importLibrary("core"));

동적 지도를 만듭니다.

const mapContainer = document.getElementById("map-container");
const mapOptions = {
    center: {lat: 37.422, lng: -122.085},
    zoom: 12 
};
const gMap = new Map(mapContainer, mapOptions);

검색 버튼에 클릭 리스너를 추가하여 장소 검색을 시작합니다. 검색 결과가 로드되면 각 장소의 마커를 만들고 클릭 리스너를 추가합니다. 마커를 클릭하면 해당 장소 세부정보가 요청되고 표시됩니다.

장소가 검색되고 장소 검색 요소가 로드되면 장소 검색 요소의 places 속성이 결과 배열로 채워집니다. 각 결과는 장소 ID, 좌표, 표시 영역이 포함된 장소 객체입니다. 세부정보를 가져오려면 장소 ID 또는 전체 장소 객체를 장소 세부정보 요소에 전달합니다.

const queryInput = document.querySelector(".query-input");
const searchButton = document.querySelector(".search-button");
const placeSearch = document.querySelector("gmp-place-search");
const placeSearchQuery = document.querySelector("gmp-place-text-search-request");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeRequest = document.querySelector("gmp-place-details-place-request");

placeDetailsPopup = new AdvancedMarkerElement({
    map: null,
    content: placeDetails,
    zIndex: 1
});

searchButton.addEventListener("click", searchPlaces);

function searchPlaces(){    
    if (queryInput.value.trim()) {
        placeSearchQuery.textQuery = queryInput.value.trim();
        placeSearchQuery.locationBias = gMap.getBounds();
        placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
    }
}

async function addMarkers(){
    const bounds = new LatLngBounds();
    placeSearch.places.forEach((place) => {
        let marker = new AdvancedMarkerElement({
            map: gMap,
            position: place.location
        });
        bounds.extend(place.location);
        marker.addListener('click',(event) => {
            placeRequest.place = place;
            placeDetails.style.display = 'block';
            placeDetailsPopup.position = place.location;
            placeDetailsPopup.map = gMap;
            gMap.fitBounds(place.viewport, {top: 200, left: 100});
        });
        gMap.setCenter(bounds.getCenter());
        gMap.fitBounds(bounds);
    });
}

이 GitHub 저장소에서 데모와 전체 코드를 확인하세요.

구축에 도움이 되는 소스

참여자

주요 저자:

테레사 퀸 | Google Maps Platform 솔루션 엔지니어

장소 UI 키트란 무엇이며 이를 사용하여 참여도 높은 솔루션을 빌드하려면 어떻게 해야 하나요? 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

소개