07/03/2024

Como obter a localização geográfica do visitante do site

Introdução

Identificar a localização geográfica de um usuário é fundamental para personalizar e melhorar a experiência em aplicações web.

Este artigo apresenta um método para capturar e exibir a posição geográfica do usuário, utilizando HTML, JavaScript e a API do OpenStreetMap para obter o endereço da sua localização.

Código Pronto para Uso

Segue um exemplo de código que obtém a localização do usuário, converte em endereço via API do OpenStreetMap e mostra no mapa.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Localização Detalhada com OpenStreetMap</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
        }
        .label {
            font-weight: bold;
        }
        #map {
            width: 100%;
            max-width: 1200px;
            aspect-ratio: 16/9;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Obtendo a localização do usuário</h1>
    <button onclick="getMyLocation()">Obter Minha Localização</button>
    <div id="result">
        <p><span class="label">Latitude:</span> <span id="latitude"></span></p>
        <p><span class="label">Longitude:</span> <span id="longitude"></span></p>
        <p><span id="address"></span></p>
    </div>
    <div id="map"></div>

    <script>
        function getMyLocation() {
            if ("geolocation" in navigator) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                updateMessage('Geolocalização não é suportada por este navegador.', '');
            }
        }

        function showPosition(position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            document.getElementById('latitude').textContent = lat;
            document.getElementById('longitude').textContent = lng;
            findAddress(lat, lng);
            showMap(lat, lng);
        }

        function showError(error) {
            updateMessage('Erro ao obter localização: ', error.message);
        }

        function findAddress(lat, lng) {
            const url = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&accept-language=pt-BR`;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        updateMessage('Endereço não encontrado.', '');
                    } else {
                        const address = buildAddress(data);
                        document.getElementById('address').innerHTML = `<span class="label">Endereço encontrado:</span><br><br>${address}`;
                    }
                })
                .catch(error => {
                    updateMessage('Erro ao obter localização: ', error);
                });
        }

        function buildAddress(data) {
            let addressParts = [];
            if (data.address.road) {
                let roadWithNumber = data.address.road;
                if (data.address.house_number) roadWithNumber += `, ${data.address.house_number}`;
                addressParts.push(roadWithNumber);
            }
            if (data.address.suburb) addressParts.push(`Bairro: ${data.address.suburb}`);
            if (data.address.municipality) addressParts.push(`Cidade: ${data.address.municipality}`);
            if (data.address.state) addressParts.push(`Estado: ${data.address.state}`);
            if (data.address.country) addressParts.push(`País: ${data.address.country}`);
            if (data.address.postcode) addressParts.push(`CEP: ${data.address.postcode}`);

            return addressParts.join('<br>');
        }

        function updateMessage(message, detail) {
            document.getElementById('result').innerHTML = `<span class="label">${message}</span>${detail}`;
        }

        function showMap(lat, lng) {
            const mapFrame = `<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=${lng-0.005}%2C${lat-0.005}%2C${lng+0.005}%2C${lat+0.005}&layer=mapnik&marker=${lat}%2C${lng}"></iframe>`;
            document.getElementById('map').innerHTML = mapFrame;
        }
    </script>
</body>
</html>

Demonstração

Clique em "Obter Minha Localização" para testar o funcionamento.

Obtendo a localização do usuário

Latitude:

Longitude:

Explicando o Código

Esta seção detalha o funcionamento do código, explicando a estrutura HTML, o CSS e as funções JavaScript utilizadas.

Estrutura HTML

O trecho HTML abaixo define a interface do usuário, incluindo um título, um botão para obter a localização, espaços para exibir a latitude, longitude e endereço, e um div para o mapa.

<h1>Obtendo a localização do usuário</h1>
<button onclick="getMyLocation()">Obter Minha Localização</button>
<div id="result">
    <p><span class="label">Latitude:</span> <span id="latitude"></span></p>
    <p><span class="label">Longitude:</span> <span id="longitude"></span></p>
    <p><span id="address"></span></p>
</div>
<div id="map"></div>

Estilização CSS

O CSS a seguir é responsável pela formatação visual da página, incluindo a fonte, a formatação dos rótulos (labels) para destaque e o dimensionamento do div do mapa para garantir uma apresentação adequada.

<style>
    body {
        font-family: 'Arial', sans-serif;
    }
    .label {
        font-weight: bold;
    }
    #map {
        width: 100%;
        max-width: 1200px;
        aspect-ratio: 16/9;
        margin-top: 20px;
    }
</style>

Função getMyLocation

Esta função verifica se o navegador suporta geolocalização. Caso positivo, utiliza o método navigator.geolocation.getCurrentPosition para obter a posição atual do usuário, chamando showPosition em caso de sucesso e showError em caso de erro.

function getMyLocation() {
    if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        updateMessage('Geolocalização não é suportada por este navegador.', '');
    }
}

Função showPosition

Esta função é chamada automaticamente quando a localização do usuário é obtida com sucesso. Ela extrai a latitude e a longitude da posição, atualiza o conteúdo dos elementos HTML correspondentes com esses valores, e então chama as funções findAddress para converter coordenadas em um endereço legível e showMap para exibir o mapa com a localização marcada.

function showPosition(position) {
    const lat = position.coords.latitude;
    const lng = position.coords.longitude;
    document.getElementById('latitude').textContent = lat;
    document.getElementById('longitude').textContent = lng;
    findAddress(lat, lng);
    showMap(lat, lng);
}

Função showError

Esta função é executada se ocorrer um erro ao tentar obter a localização do usuário. Ela recebe um objeto de erro como parâmetro e atualiza o conteúdo de um elemento HTML com uma mensagem de erro, utilizando a função updateMessage para exibir a mensagem ao usuário.

function showError(error) {
    updateMessage('Erro ao obter localização: ', error.message);
}

Função findAddress

Esta função utiliza as coordenadas geográficas (latitude e longitude) para buscar um endereço físico correspondente através da API do OpenStreetMap. Ela constrói uma URL com as coordenadas e faz uma requisição HTTP GET usando fetch. Ao receber a resposta, a função verifica se houve erro na busca do endereço. Se um endereço for encontrado, ele é construído chamando a função buildAddress e exibido no elemento HTML designado.

function findAddress(lat, lng) {
    const url = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&accept-language=pt-BR`;

    fetch(url)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                updateMessage('Endereço não encontrado.', '');
            } else {
                const address = buildAddress(data);
                document.getElementById('address').innerHTML = `<span class="label">Endereço encontrado:</span><br><br>${address}`;
            }
        })
        .catch(error => {
            updateMessage('Erro ao obter localização: ', error);
        });
}

Função buildAddress

A função buildAddress é responsável por montar um endereço legível a partir dos dados fornecidos pela API do OpenStreetMap. Ela analisa os componentes do endereço, como rua, número, bairro, cidade, estado, país e CEP, combinando-os em uma string formatada para exibição. Essa string é então retornada para ser usada na atualização do elemento HTML do endereço.

function buildAddress(data) {
    let addressParts = [];
    if (data.address.road) {
        let roadWithNumber = data.address.road;
        if (data.address.house_number) roadWithNumber += `, ${data.address.house_number}`;
        addressParts.push(roadWithNumber);
    }
    if (data.address.suburb) addressParts.push(`Bairro: ${data.address.suburb}`);
    if (data.address.municipality) addressParts.push(`Cidade: ${data.address.municipality}`);
    if (data.address.state) addressParts.push(`Estado: ${data.address.state}`);
    if (data.address.country) addressParts.push(`País: ${data.address.country}`);
    if (data.address.postcode) addressParts.push(`CEP: ${data.address.postcode}`);

    return addressParts.join('<br>');
}

Função updateMessage

A função updateMessage é utilizada para atualizar o conteúdo do elemento HTML destinado a mensagens, permitindo exibir tanto mensagens de sucesso quanto de erro ao usuário. Ela recebe dois parâmetros: message, que é a mensagem principal, e detail, que são detalhes adicionais ou mensagens de erro. Esses parâmetros são combinados e exibidos no elemento HTML designado.

function updateMessage(message, detail) {
    document.getElementById('result').innerHTML = `<span class="label">${message}</span>${detail}`;
}

Função showMap

A função showMap utiliza as coordenadas de latitude e longitude para exibir um mapa do OpenStreetMap centrado na localização do usuário. Ela cria um iframe com um mapa do OpenStreetMap, definindo o ponto de foco nas coordenadas do usuário e ajusta o zoom para uma visualização adequada. O iframe é então inserido no elemento HTML destinado ao mapa, permitindo a visualização interativa da localização.

function showMap(lat, lng) {
    const mapFrame = `<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=${lng-0.005}%2C${lat-0.005}%2C${lng+0.005}%2C${lat+0.005}&layer=mapnik&marker=${lat}%2C${lng}"></iframe>`;
    document.getElementById('map').innerHTML = mapFrame;
}

Observações Importantes

Para otimizar o uso deste código, considere aspectos essenciais:

Precisão de Localização: A precisão é tipicamente maior em dispositivos móveis com GPS integrado, diferentemente de computadores que podem depender de Wi-Fi e triangulação de antenas, resultando em menor precisão. A exatidão dos dados pode ser influenciada pelo dispositivo, método de localização, e até mesmo o ambiente físico, afetando a precisão de detalhes como o número da rua.
Consentimento do Usuário: A obtenção de dados de localização exige o consentimento do usuário, com navegadores modernos facilitando este processo. No entanto, usuários têm a opção de recusar ou bloquear essas solicitações.
Compatibilidade de Dispositivos: Certifique-se de que o dispositivo ou computador utilizado suporta geolocalização ou não tem esse serviço desativado, o que pode limitar a funcionalidade do código.
Uso de HTTPS: Para funcionamento da geolocalização, é necessário acessar o site via HTTPS com um certificado válido. Este requisito técnico não deve ser uma preocupação se o seu site estiver hospedado na MCO2, pois todos os planos de hospedagem suportam o protocolo HTTPS com certificados SSL instalados automaticamente para cada cliente.

Conclusão

A integração da geolocalização em aplicações web oferece uma ampla gama de possibilidades para melhorar a experiência do usuário, desde a personalização de conteúdo até serviços baseados na localização. O código fornecido neste artigo é um ponto de partida para implementar essas funcionalidades.

Este artigo nas redes sociais: Facebook, Twitter/X, LinkedIn, Telegram, Pinterest, Tumblr, Flipboard, Mastodon

Como obter a localização geográfica do visitante do site

Identifique a localização do usuário com JavaScript e a API OpenStreetMap

Como obter a localização geográfica do visitante do site

Introdução

Código Pronto para Uso

Demonstração

Obtendo a localização do usuário

Explicando o Código

Estrutura HTML

Estilização CSS

Função getMyLocation

Função showPosition

Função showError

Função findAddress

Função buildAddress

Função updateMessage

Função showMap

Observações Importantes

Conclusão