El
AdvancedPlaceSearchElement
es un elemento HTML que muestra los resultados de una búsqueda de lugares en una lista. Hay dos maneras de configurar el elemento gmp-advanced-place-search:
-
Para buscar lugares de un tipo específico en un área determinada, usa
la solicitud de búsqueda cercana para mostrar los
resultados de la búsqueda con
PlaceNearbySearchRequestElement. -
Para buscar lugares en un área determinada en función de una consulta de texto, usa
la solicitud de búsqueda por texto para mostrar
los resultados de la búsqueda con
PlaceTextSearchRequestElement.
Tanto la búsqueda cercana como la búsqueda por texto ofrecen las mismas funciones avanzadas, incluida la personalización de los botones de acción, el filtrado de opiniones y contenido multimedia, la configuración de la atribución de lugares, y el manejo de la selección de lugares y los errores.
Solicitud de búsqueda cercana
Selecciona un tipo de lugar en el menú para ver los resultados de la búsqueda cercana para ese tipo de lugar.
La búsqueda cercana se configura principalmente para buscar por tipo de lugar y ubicación,
y los resultados se pueden clasificar por distancia o popularidad con la
rankPreference propiedad. Consulta la documentación de referencia de la clase
PlaceNearbySearchRequestElement
para obtener más detalles.
En este ejemplo, se muestra el elemento Advanced Place Search en respuesta a una búsqueda cercana con un tipo de lugar seleccionado por el usuario. También se muestra un AdvancedPlaceDetailsCompactElement para el lugar seleccionado.
Para agregar el elemento Advanced Place Search al mapa, agrega un
gmp-advanced-place-search elemento con un
gmp-place-nearby-search-request elemento anidado a la página 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="place-list-item">
<gmp-place-all-content></gmp-place-all-content>
</template>
</gmp-advanced-place-search>
El elemento select permite que el usuario elija un tipo de lugar en
el menú. Para simplificar, solo se muestran tres tipos de lugares: restaurante, cafetería,
y estación de carga de vehículos eléctricos.
<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>
Cuando el usuario selecciona un tipo de lugar en el menú, se actualiza el
gmp-place-nearby-search-request elemento y el
elemento Advanced Place Search muestra los resultados.
Solicitud de búsqueda por texto
Ingresa un término de búsqueda en el campo de entrada y haz clic en el botón Buscar para obtener una lista de lugares que coincidan con el término.
La búsqueda por texto se configura principalmente para buscar con una consulta de texto y
una ubicación, y los resultados se pueden segmentar por nivel de precios, calificación y si
están abiertos en ese momento. Los resultados también se pueden clasificar por distancia o popularidad
con la propiedad rankPreference. Consulta la documentación de referencia de la clase
PlaceTextSearchRequestElement
para obtener más detalles.
En este ejemplo, se muestra el elemento Advanced Place Search en respuesta a una entrada de texto del usuario. También se muestra un AdvancedPlaceDetailsCompactElement para el lugar seleccionado.
Para agregar el elemento Advanced Place Search al mapa, agrega un
gmp-advanced-place-search elemento con un
gmp-place-text-search-request elemento anidado a la página HTML.
<gmp-advanced-place-search selectable>
<gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
<template slot="place-list-item">
<gmp-place-all-content></gmp-place-all-content>
</template>
</gmp-advanced-place-search>
El elemento input permite que el usuario ingrese texto de búsqueda.
<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>
Cuando el usuario hace clic en el botón Buscar , se ejecuta la función de búsqueda,
se actualiza el elemento gmp-place-text-search-request y el
elemento Advanced Place Search muestra los resultados.
Funciones avanzadas
Personalizar botones de acción
Agrega botones de acción como elementos secundarios dentro del
<template slot="place-list-item"> elemento del componente Advanced
Place Search. Usa <gmp-place-link> para las conexiones de navegación estándar y especifica de forma explícita el atributo action. De manera opcional, puedes especificar el atributo slot. Las acciones predefinidas válidas son open-website,
open-directions, open-map, y call. Si
se omite el atributo slot, el valor predeterminado es
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="place-list-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>Filtrar opiniones y contenido multimedia
En esta muestra de código, solo se muestran el contenido multimedia y las opiniones que mencionan "café".
<gmp-advanced-place-search selectable>
<gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
<template slot="place-list-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>Configurar la atribución de lugares
Para configurar la atribución visual, agrega un
<gmp-place-attribution> elemento para mostrar las configuraciones generales de atribución de datos de la API de Maps, como la fuente de una foto o una opinión.
Se debe agregar como un elemento del mismo nivel directo de <template>.
Se ignorarán las atribuciones colocadas dentro del elemento <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="place-list-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>Manejar la selección de lugares y los errores
Cuando el atributo selectable está presente, puedes escuchar el evento
gmp-select para recuperar el lugar seleccionado por el usuario. También puedes escuchar el evento gmp-error para controlar correctamente las situaciones en las que no se pueden recuperar los datos de lugares.
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); });