Elementos avanzados de Place Details (versión preliminar)

Los elementos Advanced Place Details y Advanced Place Details Compact Element son elementos HTML que renderizan detalles de un lugar:

Tanto el elemento Advanced Place Details como el elemento Advanced Place Details Compact Element ofrecen las mismas funciones avanzadas, incluida la personalización de los botones de acción, la omisión del nombre del lugar y el filtrado de opiniones y contenido multimedia.

Usa la herramienta de personalización para visualizar cómo los diferentes conjuntos de propiedades afectarán la apariencia de un elemento Places Details y acceder al código en HTML/CSS, Kotlin/XML, y Swift.

Elemento Advanced Place Details (versión preliminar)

Haz clic en un marcador del mapa para ver los detalles del lugar en un elemento Advanced Place Details.

El AdvancedPlaceDetailsElement admite una amplia variedad de elementos de contenido, incluidos el horario de atención completo, el sitio web, el número de teléfono, el resumen potenciado por IA con la opción de usar un resumen editorial, los elementos destacados específicos del tipo, las opiniones, el resumen de opiniones potenciado por IA, además del código y las listas de funciones.

Para mostrar los detalles del lugar en un mapa, agrega un gmp-advanced-place-details elemento al gmp-map elemento en la página HTML. Incluye un elemento secundario, gmp-place-details-place-request, para seleccionar el lugar. Puede ser un objeto Place, un ID de lugar o el nombre de recurso de un lugar: 

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-advanced-place-details>
      <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-advanced-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Configura el contenido

Puedes controlar el contenido específico del lugar que muestra el gmp-advanced-place-details elemento anidando elementos secundarios para seleccionar y configurar los detalles del lugar, como se muestra en este ejemplo: 

        <gmp-advanced-place-details>
            <gmp-place-details-place-request
                place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-opening-hours></gmp-place-opening-hours>
                <gmp-place-website></gmp-place-website>
                <gmp-place-phone-number></gmp-place-phone-number>
                <gmp-place-summary></gmp-place-summary>
                <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                <gmp-place-review-summary></gmp-place-review-summary>
                <gmp-place-reviews></gmp-place-reviews>
                <gmp-place-feature-list></gmp-place-feature-list>
                <gmp-place-attribution></gmp-place-attribution>
        </gmp-advanced-place-details>

Cada elemento de contenido secundario selecciona un detalle de lugar correspondiente para mostrar: gmp-place-address selecciona la dirección del lugar, gmp-place-price selecciona el nivel de precios del lugar, etc. Los elementos gmp-place-summary y gmp-place-review-summary proporcionan un resumen potenciado por IA del lugar y sus opiniones, respectivamente. El orden de los elementos secundarios es irrelevante, ya que los detalles seleccionados siempre se renderizan en un orden predefinido fijo.

Algunos de estos elementos se pueden configurar aún más con atributos específicos del contenido:

  • El elemento gmp-place-media se usa para mostrar una sola foto y, además, incluye un atributo lightbox-preferred que abre la foto en una lightbox cuando se hace clic en ella. La lightbox está inhabilitada de forma predeterminada.
  • El gmp-place-attribution elemento se usa para mostrar configuraciones generales de atribución de datos de la API de Google Maps, como la fuente de una foto o una opinión. Los atributos light-scheme-color y dark-scheme-color se usan para establecer el color de el texto de atribución en el modo claro y oscuro.

Consulta la documentación de referencia de Place Widget Content Customization para obtener más información sobre todos los elementos de contenido admitidos.

Para simplificar, también puedes usar gmp-place-all-content para mostrar todos los detalles disponibles en el elemento Advanced Place Details o con gmp-place-standard-content para mostrar una configuración estándar.

Configura la apariencia

El rango de ancho recomendado para el gmp-advanced-place-details elemento es de 250 px a 400 px. Es posible que los anchos inferiores a 250 px no se muestren correctamente. Establece la altura para que se adapte a tu aplicación. El elemento Advanced Place Details está diseñado para desplazarse dentro del espacio asignado según sea necesario.

El elemento gmp-advanced-place-details también admite una variedad de propiedades CSS personalizadas para configurar los colores y las fuentes del elemento. Consulta kit de IU de Places Custom Styling para obtener más detalles.

Elemento Advanced Place Details Compact (versión preliminar)

Haz clic en un marcador del mapa para ver los detalles del lugar en un elemento Advanced Place Details Compact.

El AdvancedPlaceDetailsCompactElement renderiza detalles de un lugar seleccionado con un espacio mínimo. Esto puede ser útil en una ventana de información que destaca un lugar en un mapa, en una experiencia de redes sociales como compartir una ubicación en un chat, como sugerencia para seleccionar tu ubicación actual o dentro de un artículo de medios para hacer referencia al lugar en Google Maps. El AdvancedPlaceDetailsCompactElement puede mostrar el nombre, la dirección, la calificación, el tipo, el precio, el ícono de accesibilidad, el estado abierto y una sola foto. Se puede mostrar de forma horizontal o vertical, según lo seleccionado por el orientation atributo.

En el siguiente fragmento, gmp-advanced-place-details-compact se configura con orientation establecido en horizontal. Un atributo adicional, truncation-preferred, trunca cierto contenido para que quepa en una línea en lugar de ajustarse. El gmp-advanced-place-details-compact elemento contiene un elemento secundario, gmp-place-details-place-request, para seleccionar el lugar. Puede ser un objeto Place, un ID de lugar o el nombre de recurso de un lugar. 

  <gmp-advanced-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-advanced-place-details-compact>

Configura el contenido

Puedes controlar el contenido específico del lugar que muestra el gmp-advanced-place-details-compact elemento anidando elementos secundarios para seleccionar y configurar los detalles del lugar, como se muestra en este fragmento: 

<gmp-advanced-place-details-compact>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-photo></gmp-place-photo>
    <gmp-place-name></gmp-place-name>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-address></gmp-place-address>
    <gmp-place-opening-hours></gmp-place-opening-hours>
    <gmp-place-attribution></gmp-place-attribution>
</gmp-advanced-place-details-compact>

Cada elemento de contenido secundario selecciona un detalle de lugar correspondiente para mostrar. El orden de los elementos secundarios es irrelevante, ya que los detalles seleccionados siempre se renderizan en un orden predefinido fijo. Algunos de estos elementos se pueden configurar aún más con atributos específicos del contenido.

Consulta la documentación de referencia de Place Widget Content Customization para obtener más información sobre todos los elementos de contenido admitidos.

Para simplificar, también puedes usar gmp-place-all-content para mostrar todos los detalles disponibles en el elemento Advanced Place Details Compact o con gmp-place-standard-content para mostrar una configuración estándar.

Configura la apariencia

El rango de ancho recomendado para el gmp-advanced-place-details-compact elemento en orientación vertical es de 180 px a 300 px. Es posible que los anchos inferiores a 160 px no se muestren correctamente. No establezcas una altura fija.

El rango de ancho recomendado para el gmp-advanced-place-details-compact elemento en orientación horizontal es de 180 px a 500 px. Es posible que los anchos inferiores a 160 px no se muestren correctamente. Con anchos inferiores a 350 px, no se mostrará la imagen en miniatura. No establezcas una altura fija.

El elemento gmp-advanced-place-details-compact también admite una variedad de propiedades CSS personalizadas para configurar los colores y las fuentes del elemento. Consulta kit de IU de Places Custom Styling para obtener más detalles.

Ten en cuenta que, si el elemento Advanced Place Details Compact se agrega a una ventana de información, se debe aplicar un estilo personalizado directamente al gmp-advanced-place-details-compact elemento. Esto se debe a que la ventana de información forma parte del DOM de sombra del mapa, por lo que no se aplicarán los estilos CSS externos. 

gmp-advanced-place-details-compact {
  --gmp-color-surface: #202124;
  --gmp-color-on-surface: #ffffff;
  --gmp-color-on-surface-variant: #9aa0a6;
  --gmp-color-primary: #8ab4f8;
  --gmp-font-family: "Roboto", sans-serif;
}

En este ejemplo, se muestra cómo agregar un AdvancedPlaceDetailsCompactElement a un mapa de forma programática con un InfoWindow y un AdvancedMarkerElement.

Funciones avanzadas

Personaliza los botones de acción

Agrega botones de acción como elementos secundarios directos del componente Advanced Place Details component. 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, se establece de forma predeterminada en action-main. 

<gmp-advanced-place-details-compact orientation="vertical" truncation-preferred>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <!-- Other content items -->
  <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
  <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
</gmp-advanced-place-details-compact>

Requisitos de atribución visual

Importante: Debes dejar en claro a los usuarios finales cuándo un botón de acción personalizado compartirá información del usuario con un tercero que no sea Google. Consulta los requisitos de atribución visual.

Omitir el nombre del lugar

Para omitir el nombre del lugar, excluye de forma explícita el <gmp-place-name> elemento de tu contenido personalizado. 

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <!-- Exclude <gmp-place-name> to hide the place name -->
  <gmp-place-rating></gmp-place-rating>
  <gmp-place-address></gmp-place-address>
</gmp-advanced-place-details>

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-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <gmp-place-media query="coffee"></gmp-place-media>
  <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
</gmp-advanced-place-details>

También puedes usar JavaScript para recuperar la cantidad total de elementos que coinciden con la consulta de búsqueda determinada leyendo las propiedades searchMediaCount y searchReviewsCount. Debes esperar el evento gmp-load antes de acceder a estas propiedades. 

const detailsElement = document.querySelector('gmp-advanced-place-details');
const mediaElement = detailsElement.querySelector('gmp-place-media');
mediaElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching photos: ', e.target.searchMediaCount);
});

const reviewsElement = detailsElement.querySelector('gmp-place-reviews');
reviewsElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching reviews: ', e.target.searchReviewsCount);
});