# Mapa incorporado (`mapa`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Endereço em texto, link para abrir no Google Maps e mapa incorporado que só carrega no clique.

- **Categoria:** Mídia
- **Equivalente no Elementor:** Google Maps
- **Arquivos:** `mapa.html`, `mapa.css`, `mapa.js`
- **Precisa de JavaScript:** sim (inicia por `data-ds-mapa`)
- **Depende de:** `botao`

## Quando usar
- Projeto com endereço físico (consultório, loja, local de evento)

## Quando não usar
- Atendimento só on-line
- Endereço residencial que não deve ser público

## Variações
- **Endereço ao lado do mapa (computador):** classe ds-mapa
- **Só o mapa:** remover .ds-mapa__info

## Conteúdo esperado
- Endereço completo real
- Endereço de incorporação do Google Maps (https://www.google.com/maps?q=...&output=embed)
- Link de busca do Google Maps

## Acessibilidade
- Endereço em <address> como texto (o mapa não é a única forma de saber onde é)
- iframe com title
- Botão de carregar com texto visível; foco vai para o mapa

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/botao/botao.css">
<link rel="stylesheet" href="componentes/mapa/mapa.css">
<script src="componentes/mapa/mapa.js" defer></script>
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-cor-borda`, `--ds-cor-superficie`, `--ds-cor-texto-destaque`, `--ds-cor-titulo`, `--ds-espaco-12`, `--ds-espaco-2`, `--ds-espaco-6`, `--ds-fonte-texto`, `--ds-raio-lg`, `--ds-tamanho-h3`, `--ds-tamanho-texto`.

## Notas

Exemplo usa um local público genérico (Praça da Sé). O mapa embutido não precisa de chave de API.