Elementos de Place Details

Selecciona la plataforma: Android iOS JavaScript

Selecciona el componente adecuado para tu caso de uso:

• El elemento Place Details renderiza detalles como el horario de atención, el sitio web y las opiniones de un lugar seleccionado. Se factura en el nivel Essentials.
• El elemento Advanced Place Details (vista previa) extiende el elemento Place Details, lo que te permite configurar botones de acción y aplicar opciones de búsqueda y filtrado a las opiniones y el contenido multimedia. Se factura en el nivel Pro.

El elemento Place Details y el elemento Place Details Compact son elementos HTML elementos que renderizan detalles de un lugar:

• El PlaceDetailsElement admite todos los datos de Place visualizables y puede incluir varias fotos.
• El PlaceDetailsCompactElement está diseñado para ocupar un espacio mínimo y mostrar un conjunto conciso de información sobre un lugar, incluidos el nombre, la dirección, la calificación, etc. También puede incluir una sola foto.

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 Place Details

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

El PlaceDetailsElement 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 impulsado por IA con una alternativa de resguardo editorial, los aspectos destacados específicos del tipo, las opiniones, el resumen de opiniones impulsado por IA, el Plus Code y las listas de funciones.

Para mostrar los detalles del lugar en un mapa, agrega un gmp-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-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Sugerencia: Puedes encontrar el ID de lugar de un lugar específico con el buscador de ID de lugar.

Configura el contenido

Puedes controlar el contenido específico del lugar que muestra el gmp-place-details elemento con un gmp-place-content-config elemento anidado para seleccionar y configurar los detalles del lugar, como se muestra en este ejemplo:

        <gmp-place-details>
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <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-content-config>
        </gmp-place-details>

El elemento gmp-place-content-config contiene varios elementos de contenido secundarios, y cada uno 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 contiene un atributo lightbox-preferred que abre la foto en un lightbox cuando se hace clic en ella. El lightbox está inhabilitado de forma predeterminada.
• El gmp-place-attribution elemento se usa para mostrar la fuente de la foto. 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 PlaceContentConfigElement documentación de referencia para obtener más información sobre todos los elementos de contenido admitidos.

Para simplificar, el gmp-place-content-config elemento se puede reemplazar por gmp-place-all-content para mostrar todos los detalles disponibles en el elemento Place Details, o por gmp-place-standard-content para mostrar una configuración estándar.

Configura la apariencia

El rango de ancho recomendado para el elemento gmp-place-details 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 Place Details está diseñado para desplazarse dentro del espacio asignado según sea necesario.

El elemento gmp-place-details también admite una variedad de propiedades 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.

Importante: Cuando realices modificaciones visuales, debes cumplir con los requisitos de atribución.

Consulta el ejemplo de código completo

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-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.place = 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"
            });
        </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-place-details>
                    <gmp-place-details-place-request
                        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                    <gmp-place-content-config>
                        <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-content-config>
                </gmp-place-details>
            </div>
        </div>
    </body>
</html>
index.html

Elemento Place Details Compact

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

El PlaceDetailsCompactElement renderiza 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 dentro de un artículo de contenido multimedia para hacer referencia al lugar en Google Maps. El PlaceDetailsCompactElement 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-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-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-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-place-details-compact>

Sugerencia: Puedes encontrar el ID de lugar de un lugar específico con el buscador de ID de lugar.

Configura el contenido

Puedes controlar el contenido específico del lugar que muestra el gmp-place-details-compact elemento con un gmp-place-content-config elemento anidado para seleccionar y configurar los detalles del lugar, como se muestra en este fragmento:

<gmp-place-content-config>
    <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-place-content-config>
index.html

El elemento gmp-place-content-config contiene varios elementos de contenido secundarios, y cada uno 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 PlaceContentConfigElement documentación de referencia para obtener más información sobre todos los elementos de contenido admitidos.

Para simplificar, el gmp-place-content-config elemento se puede reemplazar por gmp-place-all-content para mostrar todos los detalles disponibles en el elemento Place Details Compact, o por gmp-place-standard-content para mostrar una configuración estándar.

Configura la apariencia

El rango de ancho recomendado para el gmp-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-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-place-details-compact también admite una variedad de propiedades 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.

Importante: Cuando realices modificaciones visuales, debes cumplir con los requisitos de atribución.

Ten en cuenta que, si el elemento Place Details Compact se agrega a una ventana de información, se debe aplicar un estilo personalizado directamente al gmp-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-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="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
index.html

Consulta un ejemplo de código completo

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

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-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) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.place = event.placeId;
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.place = null;
            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"
            });
        </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-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-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="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <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-place-content-config>
        </gmp-place-details-compact>
    </body>
</html>
index.html