고급 장소 검색 요소

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',
            gmpClickable: true,
        });

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

        marker.addEventListener('gmp-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',
            gmpClickable: true,
        });

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

        marker.addEventListener('gmp-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',
            gmpClickable: true,
        });

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

        marker.addEventListener('gmp-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',
            gmpClickable: true,
        });

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

        marker.addEventListener('gmp-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> 요소를 추가하여 사진 또는 리뷰의 소스와 같은 전체 지도 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);
});