1001Ferramentas
🗺️Utilitários

Gerador de Embed OpenStreetMap

Monta um <iframe> de OpenStreetMap a partir de uma bounding box (lat/lng) e marker opcional.



  

Iframe de mapa OpenStreetMap sem chave de API

Você só quer um mapinha na página de contato mostrando onde fica o escritório, e o caminho do Google pede chave de API, cartão cadastrado e um punhado de termos para aceitar. O OpenStreetMap resolve com um iframe simples e gratuito, mas exige uma bounding box em vez de um endereço, e é exatamente aí que a maioria das pessoas empaca.

A bounding box é a área visível do mapa, escrita como esquerda, baixo, direita, topo: longitude mínima, latitude mínima, longitude máxima, latitude máxima. Repare na pegadinha: nela a longitude vem primeiro, enquanto o campo do marcador segue a ordem contrária, latitude e depois longitude. Nos valores padrão, a caixa é -46.66,-23.57,-46.64,-23.56 e o marcador é -23.5614,-46.6559, no centro de São Paulo.

Quanto mais apertada a caixa, maior o zoom. Deixe o campo do marcador vazio se não quiser o pino, e o parâmetro some do endereço. O iframe sai com a camada padrão do OSM; para outra, acrescente layer=cyclemap na URL depois de copiar. Vale ainda incluir loading=lazy e um link de Ver mapa maior ao lado do quadro, que é o que o próprio site do OpenStreetMap coloca junto do embed. Nada sai do seu navegador.

Perguntas frequentes

Como descubro a bounding box da minha região?
No openstreetmap.org, enquadre o local no mapa, abra Compartilhar e escolha HTML. O trecho bbox= do código sugerido já traz os quatro números prontos.
Precisa de chave de API ou cadastro?
Não. O embed do OpenStreetMap é aberto. Para tráfego alto, o projeto pede que você use seu próprio servidor de tiles ou um provedor comercial.
Dá para trocar o estilo do mapa?
O código gerado usa a camada padrão. Acrescente layer=cyclemap ou layer=transportmap ao endereço do iframe depois de copiar.

Ferramentas Relacionadas