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?
Precisa de chave de API ou cadastro?
Dá para trocar o estilo do mapa?
Ferramentas Relacionadas
Gerador de Embed Google Maps
Monta um <iframe> simples para incorporar Google Maps a partir de um endereço ou coordenadas.
Mapa de Pontos
Plote coordenadas geográficas (latitude/longitude) em um mapa interativo OpenStreetMap. Adicione marcadores clicando no mapa ou digitando as coordenadas.
Gerador de Embed da Twitch
Gere o código de embed (iframe) de um player da Twitch a partir do nome do canal e do domínio do site. Incorpore lives e VODs na sua página em segundos.