Google utiliza tecnología de IA para traducir contenido a tu idioma preferido. Las traducciones realizadas con IA pueden contener errores.

Elementos avanzados de Place Details

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

AdvancedPlaceDetailsElement admite todos los datos de Place visualizables y puede incluir varias fotos.
La AdvancedPlaceDetailsCompactElement está diseñada para ocupar un espacio mínimo y mostrar un conjunto conciso de información sobre un lugar, como el nombre, la dirección, la calificación, etcétera. También puede incluir una sola foto.

Tanto el elemento Advanced Place Details como el elemento Advanced Place Details Compact ofrecen las mismas funciones avanzadas, como personalizar los botones de acción, omitir el nombre del lugar y filtrar las opiniones y el contenido multimedia.

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

Elemento Advanced Place Details

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

AdvancedPlaceDetailsElement admite una amplia variedad de elementos de contenido, como el horario de atención completo, el sitio web, el número de teléfono, el resumen potenciado por IA con resguardo al resumen editorial, los aspectos destacados específicos del tipo, las opiniones, el resumen de opiniones potenciado por IA, el Plus Code y las listas de atributos.

Para mostrar Place Details en un mapa, agrega un elemento gmp-advanced-place-details al elemento gmp-map 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 del 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 elemento gmp-advanced-place-details 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 del lugar correspondiente para mostrarlo: 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 ventana lightbox cuando se hace clic en ella. La lightbox está inhabilitada de forma predeterminada.
El elemento gmp-place-attribution 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 del texto de atribución en los modos claro y oscuro.

Consulta la documentación de referencia de Personalización del contenido de Place Widget 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 elemento gmp-advanced-place-details es de 250 px a 400 px. Es posible que los anchos inferiores a 250 píxeles 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 de CSS personalizadas para configurar los colores y las fuentes del elemento. Consulta Estilo personalizado del kit de IU de Places para obtener más detalles.

Consulta un ejemplo de código completo

TypeScript

// Use querySelector to select elements for interaction.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeDetails = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-advanced-place-details')!;
const placeDetailsRequest = document.querySelector<HTMLElement>(
    'gmp-place-details-place-request'
)!;
const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>(
    'gmp-advanced-marker'
)!;

async function init(): Promise<void> {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });

    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place?.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';
            marker.style.display = 'block';
        }
    };

    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', () => {
        updateMapAndMarker();
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener(
        'click',
        (event: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
            marker.position = null;
            event.stop();
            if ('placeId' in event && event.placeId) {
                // Fire when the user clicks a POI.
                placeDetailsRequest.setAttribute(
                    'place',
                    `places/${event.placeId}`
                );
                updateMapAndMarker();
            } else {
                // Fire when the user clicks the map (not on a POI).
                console.log('No place was selected.');
                marker.style.display = 'none';
            }
        }
    );
}

void init();index.ts

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-advanced-place-details');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');

async function init() {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });

    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place?.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';
            marker.style.display = 'block';
        }
    };

    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', () => {
        updateMapAndMarker();
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        marker.position = null;
        event.stop();
        if ('placeId' in event && event.placeId) {
            // Fire when the user clicks a POI.
            placeDetailsRequest.setAttribute(
                'place',
                `places/${event.placeId}`
            );
            updateMapAndMarker();
        } else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
            marker.style.display = 'none';
        }
    });
}

void init();index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

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

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
}

gmp-place-details {
    width: 100%;
    margin: 0;
    border: none;
}style.css

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details 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 zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
            <div class="ui-panel">
                <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-advanced-place-details>
            </div>
        </div>
    </body>
</html>index.html

Elemento compacto de Place Details avanzado

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

La clase AdvancedPlaceDetailsCompactElement renderiza los detalles de un lugar seleccionado con un espacio mínimo. Esto puede ser útil en una ventana de información que destaque 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 en un artículo de medios para hacer referencia al lugar en Google Maps. La AdvancedPlaceDetailsCompactElement puede mostrar el nombre, la dirección, la calificación, el tipo, el precio, el ícono de accesibilidad, el estado de apertura y una sola foto. Se puede mostrar de forma horizontal o vertical, según lo que se seleccione con el atributo orientation.

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 elemento gmp-advanced-place-details-compact 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 del 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 elemento gmp-advanced-place-details-compact 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 mostrarlo. 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 Personalización del contenido de Place Widget 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 bien gmp-place-standard-content para mostrar una configuración estándar.

Configura la apariencia

El rango de ancho recomendado para el elemento gmp-advanced-place-details-compact 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 elemento gmp-advanced-place-details-compact en orientación horizontal es de 180 px a 500 px. Es posible que los anchos inferiores a 160 px no se muestren correctamente. En 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 de CSS personalizadas para configurar los colores y las fuentes del elemento. Consulta Estilo personalizado del kit de IU de Places para obtener más detalles.

Ten en cuenta que, si se agrega el elemento Advanced Place Details Compact a una ventana de información, se debe aplicar el estilo personalizado directamente al elemento gmp-advanced-place-details-compact. 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;
}

Consulta un ejemplo de código completo

TypeScript

// Use querySelector to select elements for interaction.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeDetails = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-advanced-place-details-compact')!;
const placeDetailsRequest = document.querySelector<HTMLElement>(
    'gmp-place-details-place-request'
)!;
const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>(
    'gmp-advanced-marker'
)!;
async function init(): Promise<void> {
    // Request needed libraries.
    void Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = await google.maps.importLibrary('maps');

    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });

    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';

    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });

    const showInfoWindow = () => {
        if (infoWindow.isOpen) return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };

    placeDetails.addEventListener('gmp-load', () => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center && placeDetails.place?.location) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener(
        'click',
        (event: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
            event.stop();

            if ('placeId' in event && event.placeId) {
                // When the user clicks a POI.
                marker.position = event.latLng;
                placeDetailsRequest.setAttribute(
                    'place',
                    `places/${event.placeId}`
                );
                showInfoWindow();
            } else {
                // When the user clicks the map (not on a POI).
                marker.position = null;
                placeDetailsRequest.removeAttribute('place');
                console.log('No place was selected.');
            }
        }
    );
}
void init();index.ts

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector(
    'gmp-advanced-place-details-compact'
);
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');
async function init() {
    // Request needed libraries.
    void Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = await google.maps.importLibrary('maps');

    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });

    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';

    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });

    const showInfoWindow = () => {
        if (infoWindow.isOpen) return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };

    placeDetails.addEventListener('gmp-load', () => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center && placeDetails.place?.location) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        event.stop();

        if ('placeId' in event && event.placeId) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.setAttribute(
                'place',
                `places/${event.placeId}`
            );
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.removeAttribute('place');
            console.log('No place was selected.');
        }
    });
}
void init();index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

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

gmp-map {
    flex-grow: 1;
}style.css

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details Compact 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 zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </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
                place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>

            <gmp-place-name></gmp-place-name>
            <gmp-place-media lightbox-preferred></gmp-place-media>
            <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-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>index.html

Funciones avanzadas

Personaliza los botones de acción

Agrega botones de acción como elementos secundarios directos del componente Advanced Place Details. 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-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 cuando un botón de acción personalizada comparta 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 elemento <gmp-place-name> 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 incluyen fotos, videos y 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 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);
});

Elementos avanzados de Place Details Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Elemento Advanced Place Details

Configura el contenido

Configura la apariencia

Consulta un ejemplo de código completo

TypeScript

JavaScript

CSS

HTML

Elemento compacto de Place Details avanzado

Configura el contenido

Configura la apariencia

Consulta un ejemplo de código completo

TypeScript

JavaScript

CSS

HTML

Funciones avanzadas

Personaliza los botones de acción

Requisitos de atribución visual

Omitir el nombre del lugar

Filtrar opiniones y contenido multimedia

Elementos avanzados de Place Details