Como adicionar um mapa OpenStreetMap (Leaflet) ao site Turbosite

OpenStreetMap (OSM) é um banco de dados cartográfico gratuito, uma alternativa aberta ao Google Maps e ao Yandex Maps. Leaflet é a biblioteca JavaScript mais popular para exibir o OSM em um site. Totalmente gratuito, sem chaves de API, sem limites. Ideal para projetos onde é importante evitar serviços pagos. A instalação leva de 5 a 10 minutos.

O que você precisará

• Coordenadas do local que deseja exibir (latitude/longitude) — podem ser obtidas em openstreetmap.org (clique com o botão direito no ponto → “Show address”)
• Um site publicado no Turbosite
• 5–10 minutos

Passo 1. Obter as coordenadas do seu local

1. Abra o openstreetmap.org.
2. Encontre o endereço ou organização desejada na busca.
3. Clique com o botão direito no ponto desejado → “Show address”.
4. Na barra de endereços, aparecerão coordenadas no formato 52.5200,13.4050 (latitude, longitude). Anote-as.

Passo 2. Preparar o código HTML

Ao contrário do Google Maps e do 2GIS, o OSM não possui um construtor de iframe pronto — o mapa é conectado através da biblioteca Leaflet. Aqui está o código pronto que você pode usar:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="map" style="height: 400px; width: 100%;"></div>

<script>
  var map = L.map('map').setView([52.5200, 13.4050], 15);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  L.marker([52.5200, 13.4050]).addTo(map)
    .bindPopup('Estamos aqui')
    .openPopup();
</script>

O que personalizar:

• 52.5200, 13.4050 — substitua ambas as ocorrências pelas suas coordenadas (latitude, longitude).
• 15 — nível de zoom do mapa (13–17 para cidades; quanto maior, mais próximo).
• Estamos aqui — texto na janela popup acima do marcador.
• height: 400px — altura do mapa.

Passo 3. Inserir o código no Turbosite

O mapa aparece em um local específico da página.

1. Abra seu site no Turbosite.
2. Adicione um bloco “Código HTML” no local desejado da página (geralmente no bloco “Contatos”).
3. Cole o código Leaflet preparado.
4. Salve as alterações.
5. Publique o site.

📷 [captura de tela do Turbosite — será adicionada: bloco de código HTML no corpo da página com o código Leaflet].

Passo 4. Verificar se o mapa funciona

1. Abra o site publicado.
2. Role até o bloco do mapa — o mapa do OpenStreetMap com o marcador deve carregar.
3. Clique no marcador — um popup com seu texto deve aparecer.
4. Verifique o zoom (roda do mouse ou pinça em dispositivos móveis).

Perguntas frequentes

Por que usar o OSM em vez do Google Maps? Os principais motivos: totalmente gratuito, sem limites e sem chaves de API, não requer registro, sem riscos de interrupção. O ponto negativo é que os dados podem ser menos atualizados em regiões pequenas.

É possível adicionar vários marcadores? Sim, repita L.marker([latitude, longitude]).addTo(map).bindPopup('Texto'); para cada marcador.

O mapa deixa o site lento. O Leaflet e os tiles do OSM são carregados sob demanda. Se houver apenas um mapa na página, não haverá problemas.

É possível estilizar o mapa com as cores da marca? Sim, mas não através dos tiles padrão do OSM. Use provedores de tiles de terceiros (Mapbox, Stadia Maps, Thunderforest) — alguns são gratuitos para cargas pequenas, outros são pagos.

É necessário incluir a atribuição do OpenStreetMap? Sim, é obrigatório — é um requisito da licença. No código pronto acima, ela já está incluída na linha attribution.

Onde buscar mais informações

• Documentação do Leaflet — manual completo
• Guia de Início Rápido do Leaflet — introdução rápida
• OpenStreetMap — o mapa em si
• Provedores de tiles alternativos — para alterar o estilo do mapa