MapEmbed
Ubicación con mapa de Google o, sin clave, la tarjeta con el enlace.
Usar
import { MapEmbed } from "@unozero-ai/ui/react";
<MapEmbed></MapEmbed>Sin clave: la tarjeta con el enlace
Sin apiKey no se pinta ningún mapa: queda la tarjeta con el nombre, la dirección y el enlace que abre el sitio en Google Maps. Es lo que el huésped necesita de verdad, abrir la dirección en su teléfono, y funciona sin configurar nada. Un mapa sin clave sería un recuadro gris con un error de Google.
Con clave: el mapa embebido
Con una clave de la Maps Embed API, el mapa aparece entre la cabecera y el enlace, y carga en diferido. La clave llega por la prop apiKey y el kit no la lee de process.env: no sabe cómo llama cada producto a sus variables de entorno. Léela tú de la tuya y pásala.
Va en la URL del mapa, así que es pública por naturaleza: restríngela en Google Cloud a la Maps Embed API y a los dominios de tu producto.
NEXT_PUBLIC_GOOGLE_MAPS_EMBED_KEY=tu-clave<MapEmbed
name="Hotel Bahía Serena"
address="Calle del Arsenal 24-15, Getsemaní, Cartagena"
lat="10.4206"
lng="-75.5482"
apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_EMBED_KEY}
/>Coordenadas o una búsqueda
name y address son opcionales y solo se leen: sin ellos queda solo el enlace. El sitio se señala de tres formas, por este orden: un placeId de Google, que abre la ficha con sus fotos y reseñas; lat y lng; o query, nuevo en este kit, una dirección o un nombre que Google busca. Sin ninguno el componente no pinta nada, en vez de dejar una tarjeta vacía.
En una conversación
Cuando el asistente comparte la ubicación del hotel, el mapa va dentro de su burbuja, debajo del texto: ChatMessage recibe el contenido por un slot y ya no hace falta colocarlo fuera ni alinearlo a mano con el avatar, como con el kit React. El componente trae su propio margen vertical de 12 px.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).