Elementos de Place Details

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

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

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

PlaceDetailsElement 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-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-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>

Configura el contenido

Puedes controlar el contenido específico del lugar que muestra el elemento gmp-place-details anidando elementos secundarios 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-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-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. Solo se muestran los elementos de contenido que incluyas, por lo que debes incluir gmp-place-name para mostrar el nombre del lugar.

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 la fuente de la foto. 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 Place Details o gmp-place-standard-content para mostrar una configuración estándar. Ambos elementos incluyen el nombre del lugar.

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 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 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();

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;
}

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>

Elemento Place Details Compact

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

La clase PlaceDetailsCompactElement 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 PlaceDetailsCompactElement puede mostrar el nombre visible, 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 en el atributo orientation.

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 elemento gmp-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-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>

Configura el contenido

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

<gmp-place-details-compact orientation="horizontal" truncation-preferred>
  <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <gmp-place-media lightbox-preferred></gmp-place-media>
  <gmp-place-name></gmp-place-name>
  <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-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. Solo se muestran los elementos de contenido que incluyas, por lo que debes incluir gmp-place-name para mostrar el nombre del lugar. 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 Place Details Compact o gmp-place-standard-content para mostrar una configuración estándar. Ambos elementos incluyen el nombre del lugar.

Configura la apariencia

El rango de ancho recomendado para el elemento gmp-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-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-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 Place Details Compact a una ventana de información, se debe aplicar el diseño personalizado directamente al elemento gmp-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-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>

Consulta un ejemplo de código completo

En este ejemplo, se muestra cómo agregar un objeto PlaceDetailsCompactElement a un mapa de forma programática con un objeto InfoWindow y un objeto 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();

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;
}

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>