고급 장소 검색 요소 (미리보기)

AdvancedPlaceSearchElement 는 장소 검색 결과를 목록으로 렌더링하는 HTML 요소입니다. gmp-advanced-place-search 요소는 다음 두 가지 방법으로 구성할 수 있습니다.

주변 검색과 텍스트 검색은 모두 작업 버튼 맞춤설정, 리뷰 및 미디어 필터링, 장소 저작자 표시 구성, 장소 선택 및 오류 처리 등 동일한 고급 기능을 제공합니다.

주변 검색 요청

메뉴에서 장소 유형을 선택하여 해당 장소 유형의 주변 검색 결과를 확인합니다.

주변 검색은 주로 장소 유형 및 위치별로 검색하도록 구성되며, rankPreference 속성을 사용하여 거리 또는 인기도별로 결과를 순위 지정할 수 있습니다. 자세한 내용은 PlaceNearbySearchRequestElement 클래스 참고 문서를 확인하세요.

이 예에서는 사용자가 선택한 장소 유형으로 주변 검색에 대한 응답으로 고급 장소 검색 요소를 렌더링합니다. 또한 선택한 장소의 AdvancedPlaceDetailsCompactElement 를 표시합니다.

지도에 고급 장소 검색 요소를 추가하려면 중첩된 gmp-place-nearby-search-request 요소가 있는 gmp-advanced-place-search 요소를 HTML 페이지에 추가합니다. 

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="details-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

전체 코드 예 보기

TypeScript

// Query selectors for various elements in the HTML file.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeSearch = document.querySelector<
    HTMLElement & { places?: google.maps.places.Place[] }
>('gmp-advanced-place-search')!;
const placeSearchQuery = document.querySelector<
    HTMLElement & {
        locationRestriction?: {
            center: google.maps.LatLng | google.maps.LatLngLiteral;
            radius: number;
        };
        includedTypes?: string[];
    }
>('gmp-place-nearby-search-request')!;
const placeDetails = document.querySelector<HTMLElement>(
    'gmp-advanced-place-details-compact'
)!;
const placeRequest = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-place-details-place-request')!;
const typeSelect = document.querySelector<HTMLSelectElement>('.type-select')!;

// Global variables for the map, markers, and info window.
const markers = new Map<string, google.maps.marker.AdvancedMarkerElement>();
let infoWindow: google.maps.InfoWindow;

// The init function is called when the page loads.
async function init(): Promise<void> {
    // Import the necessary libraries from the Google Maps API.
    const [{ InfoWindow }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Create a new info window and set its content to the place details element.
    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
    infoWindow = new InfoWindow({
        content: placeDetails,
        ariaLabel: 'Place Details',
    });

    // Set the map options.
    map.innerMap.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });

    // Add event listeners to the type select and place search elements.
    typeSelect.addEventListener('change', () => {
        searchPlaces();
    });

    placeSearch.addEventListener('gmp-select', (event: Event) => {
        const place = (event as Event & { place?: google.maps.places.Place })
            .place;
        if (place?.id) {
            markers.get(place.id)?.click();
        }
    });
    placeSearch.addEventListener('gmp-load', () => {
        void addMarkers();
    });

    searchPlaces();
}
// The searchPlaces function is called when the user changes the type select or when the page loads.
function searchPlaces() {
    // Close the info window and clear the markers.
    infoWindow.close();
    for (const marker of markers.values()) {
        marker.remove();
    }
    markers.clear();

    // Set the place search query and add an event listener to the place search element.
    if (typeSelect.value) {
        const center = map.center!;
        placeSearchQuery.locationRestriction = {
            center,
            radius: 50000, // 50km radius
        };
        placeSearchQuery.includedTypes = [typeSelect.value];
    }
}

// The addMarkers function is called when the place search element loads.
async function addMarkers() {
    // Import the necessary libraries from the Google Maps API.
    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('core'),
    ]);
    const bounds = new LatLngBounds();

    if (!placeSearch.places || placeSearch.places.length === 0) {
        return;
    }

    for (const place of placeSearch.places) {
        if (!place.location) continue;
        const marker = new AdvancedMarkerElement({
            map: map.innerMap,
            position: place.location,
            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
        });

        markers.set(place.id, marker);
        bounds.extend(place.location);

        marker.addListener('click', () => {
            placeRequest.place = place;
            infoWindow.open(map.innerMap, marker);
        });
    }

    map.innerMap.fitBounds(bounds);
}

void init();

JavaScript

// Query selectors for various elements in the HTML file.
const map = document.querySelector('gmp-map');
const placeSearch = document.querySelector('gmp-advanced-place-search');
const placeSearchQuery = document.querySelector(
    'gmp-place-nearby-search-request'
);
const placeDetails = document.querySelector(
    'gmp-advanced-place-details-compact'
);
const placeRequest = document.querySelector('gmp-place-details-place-request');
const typeSelect = document.querySelector('.type-select');

// Global variables for the map, markers, and info window.
const markers = new Map();
let infoWindow;

// The init function is called when the page loads.
async function init() {
    // Import the necessary libraries from the Google Maps API.
    const [{ InfoWindow }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Create a new info window and set its content to the place details element.
    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
    infoWindow = new InfoWindow({
        content: placeDetails,
        ariaLabel: 'Place Details',
    });

    // Set the map options.
    map.innerMap.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });

    // Add event listeners to the type select and place search elements.
    typeSelect.addEventListener('change', () => {
        searchPlaces();
    });

    placeSearch.addEventListener('gmp-select', (event) => {
        const place = event.place;
        if (place?.id) {
            markers.get(place.id)?.click();
        }
    });
    placeSearch.addEventListener('gmp-load', () => {
        void addMarkers();
    });

    searchPlaces();
}
// The searchPlaces function is called when the user changes the type select or when the page loads.
function searchPlaces() {
    // Close the info window and clear the markers.
    infoWindow.close();
    for (const marker of markers.values()) {
        marker.remove();
    }
    markers.clear();

    // Set the place search query and add an event listener to the place search element.
    if (typeSelect.value) {
        const center = map.center;
        placeSearchQuery.locationRestriction = {
            center,
            radius: 50000, // 50km radius
        };
        placeSearchQuery.includedTypes = [typeSelect.value];
    }
}

// The addMarkers function is called when the place search element loads.
async function addMarkers() {
    // Import the necessary libraries from the Google Maps API.
    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('core'),
    ]);
    const bounds = new LatLngBounds();

    if (!placeSearch.places || placeSearch.places.length === 0) {
        return;
    }

    for (const place of placeSearch.places) {
        if (!place.location) continue;
        const marker = new AdvancedMarkerElement({
            map: map.innerMap,
            position: place.location,
            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
        });

        markers.set(place.id, marker);
        bounds.extend(place.location);

        marker.addListener('click', () => {
            placeRequest.place = place;
            infoWindow.open(map.innerMap, marker);
        });
    }

    map.innerMap.fitBounds(bounds);
}

void init();

CSS

html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
    overflow-y: auto;
    font-family: Arial, Helvetica, sans-serif;
}

.list-container {
    display: flex;
    flex-direction: column;
}

gmp-place-search {
    width: 100%;
    margin: 0;
    border: none;
    color-scheme: light;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Place Search Nearby with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY",
                v: "beta"
            });
        </script>
    </head>
    <body>

        <div class="container">
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
            </gmp-map>
            <div class="ui-panel">
                <div class="controls">
                    <label for="type-select">
                        Select a place type:
                        <select id="type-select" class="type-select">
                            <option value="restaurant">Restaurant</option>
                            <option value="cafe" selected>Cafe</option>
                            <option value="electric_vehicle_charging_station">
                                EV charging station
                            </option>
                        </select>
                    </label>
                </div>
                <div class="list-container">
                    <gmp-advanced-place-search selectable>
                        <gmp-place-all-content></gmp-place-all-content>
                        <gmp-place-nearby-search-request
                            max-result-count="5"></gmp-place-nearby-search-request>
                    </gmp-advanced-place-search>
                </div>
            </div>
        </div>

        <!--
        The gmp-advanced-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
    -->
        <gmp-advanced-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request></gmp-place-details-place-request>

            <gmp-place-media></gmp-place-media>
            <gmp-place-rating></gmp-place-rating>
            <gmp-place-price></gmp-place-price>
            <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
            <gmp-place-open-now-status></gmp-place-open-now-status>
            <gmp-place-attribution
                light-scheme-color="gray"
                dark-scheme-color="white"></gmp-place-attribution>
        </gmp-advanced-place-details-compact>

    </body>
</html>

select 요소를 사용하면 사용자가 메뉴에서 장소 유형을 선택할 수 있습니다. 간단히 하기 위해 레스토랑, 카페, 전기자동차 충전소의 세 가지 장소 유형만 나열됩니다. 

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

사용자가 메뉴에서 장소 유형을 선택하면 gmp-place-nearby-search-request 요소가 업데이트되고 고급 장소 검색 요소에 결과가 표시됩니다.

텍스트로 검색 요청

입력란에 검색어를 입력하고 검색 버튼을 클릭하여 검색어와 일치하는 장소 목록을 가져옵니다.

텍스트 검색은 주로 텍스트 쿼리 및 위치를 사용하여 검색하도록 구성되며, 가격대, 평점, 현재 영업 중인지 여부로 결과를 세부적으로 조정할 수 있습니다. 결과는 거리 또는 인기도별로 순위 지정할 수도 있습니다. rankPreference 속성을 사용하여. 자세한 내용은 PlaceTextSearchRequestElement 클래스 참고 문서를 확인하세요.

이 예에서는 사용자 텍스트 입력에 대한 응답으로 고급 장소 검색 요소를 렌더링합니다. 또한 선택한 장소의 AdvancedPlaceDetailsCompactElement 를 표시합니다.

지도에 고급 장소 검색 요소를 추가하려면 중첩된 gmp-place-text-search-request 요소가 있는 gmp-advanced-place-search 요소를 HTML 페이지에 추가합니다. 

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="details-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

input 요소를 사용하면 사용자가 검색 텍스트를 입력할 수 있습니다. 

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

사용자가 검색 버튼을 클릭하면 검색 함수가 실행되고 gmp-place-text-search-request 요소가 업데이트되며 고급 장소 검색 요소에 결과가 표시됩니다.

전체 코드 예 보기

TypeScript

// Query selectors for various elements in the HTML file.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeSearch = document.querySelector<
    HTMLElement & { places?: google.maps.places.Place[] }
>('gmp-advanced-place-search')!;
const placeSearchQuery = document.querySelector<
    HTMLElement & {
        textQuery?: string;
        locationBias?: google.maps.LatLng | google.maps.LatLngLiteral;
    }
>('gmp-place-text-search-request')!;
const placeDetails = document.querySelector<HTMLElement>(
    'gmp-advanced-place-details-compact'
)!;
const placeRequest = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-place-details-place-request')!;
const queryInput = document.querySelector<HTMLInputElement>('.query-input')!;
const searchButton = document.querySelector<HTMLElement>('.search-button')!;

// Global variables for the map, markers, and info window.
const markers = new Map<string, google.maps.marker.AdvancedMarkerElement>();
let infoWindow: google.maps.InfoWindow;

// The init function is called when the page loads.
async function init(): Promise<void> {
    // Import the necessary libraries from the Google Maps API.
    const [{ InfoWindow }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Create a new info window and set its content to the place details element.
    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
    infoWindow = new InfoWindow({
        content: placeDetails,
        ariaLabel: 'Place Details',
    });

    // Set the map options.
    map.innerMap.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });

    // Add event listeners to the query input and place search elements.
    searchButton.addEventListener('click', () => {
        searchPlaces();
    });
    queryInput.addEventListener('keydown', (event: KeyboardEvent) => {
        if (event.key === 'Enter') {
            searchPlaces();
        }
    });

    placeSearch.addEventListener('gmp-select', (event: Event) => {
        const place = (event as Event & { place?: google.maps.places.Place })
            .place;
        if (place?.id) {
            markers.get(place.id)?.click();
        }
    });
    placeSearch.addEventListener('gmp-load', () => {
        void addMarkers();
    });

    searchPlaces();
}
// The searchPlaces function is called when the user changes the query input or when the page loads.
function searchPlaces() {
    // Close the info window and clear the markers.
    infoWindow.close();
    for (const marker of markers.values()) {
        marker.remove();
    }
    markers.clear();

    // Set the place search query and add an event listener to the place search element.
    if (queryInput.value) {
        const center = map.center;
        if (center) {
            placeSearchQuery.locationBias = center;
        }
        // The textQuery property is required for the search element to load.
        // Any other configured properties will be ignored if textQuery is not set.
        placeSearchQuery.textQuery = queryInput.value;
    }
}

// The addMarkers function is called when the place search element loads.
async function addMarkers() {
    // Import the necessary libraries from the Google Maps API.
    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('core'),
    ]);
    const bounds = new LatLngBounds();

    if (!placeSearch.places || placeSearch.places.length === 0) {
        return;
    }

    for (const place of placeSearch.places) {
        if (!place.location) {
            continue;
        }

        const marker = new AdvancedMarkerElement({
            map: map.innerMap,
            position: place.location,
            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
        });

        markers.set(place.id, marker);
        bounds.extend(place.location);

        marker.addListener('click', () => {
            placeRequest.place = place;
            infoWindow.open(map.innerMap, marker);
        });
    }

    map.innerMap.fitBounds(bounds);
}

void init();

JavaScript

// Query selectors for various elements in the HTML file.
const map = document.querySelector('gmp-map');
const placeSearch = document.querySelector('gmp-advanced-place-search');
const placeSearchQuery = document.querySelector(
    'gmp-place-text-search-request'
);
const placeDetails = document.querySelector(
    'gmp-advanced-place-details-compact'
);
const placeRequest = document.querySelector('gmp-place-details-place-request');
const queryInput = document.querySelector('.query-input');
const searchButton = document.querySelector('.search-button');

// Global variables for the map, markers, and info window.
const markers = new Map();
let infoWindow;

// The init function is called when the page loads.
async function init() {
    // Import the necessary libraries from the Google Maps API.
    const [{ InfoWindow }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Create a new info window and set its content to the place details element.
    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
    infoWindow = new InfoWindow({
        content: placeDetails,
        ariaLabel: 'Place Details',
    });

    // Set the map options.
    map.innerMap.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });

    // Add event listeners to the query input and place search elements.
    searchButton.addEventListener('click', () => {
        searchPlaces();
    });
    queryInput.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            searchPlaces();
        }
    });

    placeSearch.addEventListener('gmp-select', (event) => {
        const place = event.place;
        if (place?.id) {
            markers.get(place.id)?.click();
        }
    });
    placeSearch.addEventListener('gmp-load', () => {
        void addMarkers();
    });

    searchPlaces();
}
// The searchPlaces function is called when the user changes the query input or when the page loads.
function searchPlaces() {
    // Close the info window and clear the markers.
    infoWindow.close();
    for (const marker of markers.values()) {
        marker.remove();
    }
    markers.clear();

    // Set the place search query and add an event listener to the place search element.
    if (queryInput.value) {
        const center = map.center;
        if (center) {
            placeSearchQuery.locationBias = center;
        }
        // The textQuery property is required for the search element to load.
        // Any other configured properties will be ignored if textQuery is not set.
        placeSearchQuery.textQuery = queryInput.value;
    }
}

// The addMarkers function is called when the place search element loads.
async function addMarkers() {
    // Import the necessary libraries from the Google Maps API.
    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('core'),
    ]);
    const bounds = new LatLngBounds();

    if (!placeSearch.places || placeSearch.places.length === 0) {
        return;
    }

    for (const place of placeSearch.places) {
        if (!place.location) {
            continue;
        }

        const marker = new AdvancedMarkerElement({
            map: map.innerMap,
            position: place.location,
            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
        });

        markers.set(place.id, marker);
        bounds.extend(place.location);

        marker.addListener('click', () => {
            placeRequest.place = place;
            infoWindow.open(map.innerMap, marker);
        });
    }

    map.innerMap.fitBounds(bounds);
}

void init();

CSS

html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    overflow-y: auto;
    font-family: Arial, Helvetica, sans-serif;
}

.list-container {
    display: flex;
    flex-direction: column;
}

gmp-place-search {
    width: 100%;
    margin: 0;
    border: none;
    color-scheme: light;
}

.query-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.search-button {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
    background-color: #1a73e8;
    color: white;
    border: none;
    cursor: pointer;
}

.search-button:hover,
.search-button:focus-visible {
    background-color: #1765cc;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Place Text Search with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY",
                v: "beta"
            });
        </script>
    </head>
    <body>

        <div class="container">
            <div class="ui-panel">
                <div class="controls">
                    <input
                        type="text"
                        id="query-input"
                        class="query-input"
                        placeholder="Search for a place"
                        value="cafe" />
                    <button class="search-button">Search</button>
                </div>
                <div class="list-container">
                    <gmp-advanced-place-search selectable>
                        <gmp-place-all-content></gmp-place-all-content>
                        <gmp-place-text-search-request
                            max-result-count="5"></gmp-place-text-search-request>
                    </gmp-advanced-place-search>
                </div>
            </div>
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
            </gmp-map>
        </div>

        <!--
        The gmp-advanced-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
        -->
        <gmp-advanced-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request></gmp-place-details-place-request>

            <gmp-place-name></gmp-place-name>
            <gmp-place-media></gmp-place-media>
            <gmp-place-rating></gmp-place-rating>
            <gmp-place-price></gmp-place-price>
            <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
            <gmp-place-open-now-status></gmp-place-open-now-status>
            <gmp-place-attribution
                light-scheme-color="gray"
                dark-scheme-color="white"></gmp-place-attribution>
        </gmp-advanced-place-details-compact>

    </body>
</html>

고급 기능

작업 버튼 맞춤설정

고급 장소 검색 구성요소의 <template slot="details-item"> 요소 내에 작업 버튼을 하위 요소로 추가합니다. 표준 탐색 연결에는 <gmp-place-link>를 사용하고 action 속성을 명시적으로 지정합니다. 원하는 경우 slot 속성을 지정할 수 있습니다. 유효한 사전 정의된 작업은 open-website, open-directions, open-map, call입니다. slot 속성을 생략하면 기본적으로 action-main으로 설정됩니다. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="details-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-search>

리뷰 및 미디어 필터링

이 코드 샘플은 '커피'를 언급하는 미디어 및 리뷰만 보여줍니다.

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="details-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

장소 저작자 표시 구성

시각적 저작자 표시를 구성하려면 <gmp-place-attribution> 요소를 추가하여 사진 또는 리뷰의 출처와 같은 포괄적인 Maps API 데이터 저작자 표시 구성을 표시합니다. <template>의 직접 형제 요소로 추가해야 합니다. <template> 요소 내부 에 배치된 저작자 표시는 무시됩니다. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="details-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-search>

장소 선택 및 오류 처리

selectable 속성이 있으면 gmp-select 이벤트를 수신 대기하여 사용자가 선택한 장소를 가져올 수 있습니다. 이벤트를 수신 대기하여 장소 데이터를 가져오지 못하는 시나리오를 원활하게 처리할 수도 있습니다.gmp-error 

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});