El AdvancedPlaceListElement es un elemento HTML que renderiza una colección de lugares en una lista, dados sus nombres de recursos de Place.
El elemento de lista de lugares avanzada ofrece funciones avanzadas, como personalizar botones de acción, configurar la atribución de Place y controlar errores.
Uso básico
Para usar el componente, agrega un elemento <gmp-advanced-place-list>
a tu página y pasa una lista de nombres de recursos de Place separados por comas
a través del atributo places.
<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU,places/ChIJyWEHuEmuEmsRm9hTkapTCrk">
<template slot="place-list-item">
<gmp-place-name></gmp-place-name>
<gmp-place-address></gmp-place-address>
<gmp-place-media query="coffee"></gmp-place-media>
<gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
</template>
</gmp-advanced-place-list>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 de lista de lugares avanzada. 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-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
<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-list>Configurar la atribución de Place
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 reseña.
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-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
<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-list>Soluciona errores
Puedes escuchar el evento gmp-error para controlar correctamente
las situaciones en las que no se carga uno o más lugares solicitados.
const listElement = document.querySelector('gmp-advanced-place-list'); listElement.addEventListener('gmp-error', (e) => { // e.detail.errors contains an array of failure objects with specific failed Resource Names console.error('Failed to load places: ', e.detail.errors); });