Obter coordenadas no novo Google Maps

O novo Google Maps é muito mais apelativo aos nossos olhos mas muitas utilidades ficaram na gaveta. Aos poucos a Google vai implementando algumas das ferramentas mais úteis da anterior versão. Mas a facilidade com que se encontravam as coordenadas de um local no formato graus decimais (DDD: 40.604036, -8.665247) ainda não foi implementada no novo Google Maps.

Poderás também estar interessado em:
Conversor de coordenadas geográficas

À data da publicação deste artigo a única forma de encontrar essas coordenadas é através do URL.
Ao fazer click no mapa surge uma caixa no canto superior esquerdo que mostra as coordenadas de GPS. Com um click nessas coordenadas o URL da página é alterado e no final do URL encontramos as coordenadas DDD.
No seguinte URL mostro o endereço completo de uma localização após o click nas coordenadas de GPS. No final do URL aparacem as respectivas coordenadas em graus decimais.

https://www.google.com/maps/preview#!q=40%C2%B0+38.396'%2C+-8%C2%B0+36.570'&data=!4m14!2m13!1m12!3m8!1m3!1d10723!2d-8.6007929!3d40.6367078!3m2!1i1366!2i680!4f13.1!4m2!3d40.6399333!4d-8.6095

Com a API do Google Maps podemos facilmente criar o nosso próprio sistema de pesquisa de coordenadas no formato graus decimais.
Antes da explicação do código vejamos uma demonstração do sistema em funcionamento.

Antes de iniciar o tutorial vê uma demonstração do mapa ou faz o download do código necessário para seguir este exemplo.

DEMO DOWNLOAD

Actualização (3 de Abril de 2014)

No final de Fevereiro passado, a equipa do Google Maps trouxe de volta a possibilidade de clicar com o botão direito no mapa e solicitar mais informações sobre o local seleccionado. Assim, é novamente possível obter as direcções para ou a partir do local, bem como visualizar a latitude e longitude.

Implementação do sistema de detecção de coordenadas

O código JavaScript necessário para implementar um sistema de detecção de coordenadas é muito simples. Antes de mais é necessário fazer uso do evento que detecta um click no mapa e inserir um marcador no mapa. Ao mesmo tempo passamos os valores de latitude e longitude para as respectivas caixas de texto existentes no topo da página.

O seguinte código demonstra como iniciar o mapa e a detecção do click no mapa. Os comentários inseridos no código devem ser suficientes para perceber o seu funcionamento.

JavaScript /map.jsmarnoto.com

// Váriáveis necessárias
var map;
var marker;

function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(40.601203,-8.668173),
      zoom: 9,
      mapTypeId: 'roadmap'
   };

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   // Evento que detecta o click no mapa para criar o marcador
   google.maps.event.addListener(map, "click", function(event) {

      // O evento "click" retorna a posição do click no mapa,
      // através dos métodos latLng.lat() e latLng.lng().

      // Passamos as respectivas coordenadas para as variáveis lat e lng
      // para posterior referência.
      // Utilizamos o método toFixed(6) para limitar o número de casas decimais.
      // A API ignora os valores além da 6ª casa decimal
      var lat = event.latLng.lat().toFixed(6);
      var lng = event.latLng.lng().toFixed(6);

      // A criação do marcador é feita na função createMarker() e
      // passamos os valores das coordenadas do click através
      // dos parâmetros lat e lng.
      createMarker(lat, lng);

      // getCoords() actualiza os valores de Latitue e Longitude
      // das caixas de texto existentes no topo da página
      getCoords(lat, lng);

   });
}
google.maps.event.addDomListener(window, 'load', initialize);

Agora vejamos o código para a criação do marcador no mapa, com a adição do evento que detecta o arrastar do marcador para um posicionamento no mapa  com maior precisão.

JavaScript /map.jsmarnoto.com

// Função que cria o marcador
function createMarker(lat, lng) {

   // A intenção é criar um único marcador, por isso
   // verificamos se já existe um marcador no mapa.
   // Assim cada vez que é feito um click no mapa
   // o anterior marcador é removido e é criado outro novo.

   // Se a variável marker contém algum valor
   if (marker) {
      // remover esse marcador do mapa
      marker.setMap(null);
      // remover qualquer valor da variável marker
      marker = "";
   }

   // definir a variável marker com os novos valores
   marker = new google.maps.Marker({

      // Define a posição do marcador através dos valores lat e lng
      // que foram definidos através do click no mapa
      position: new google.maps.LatLng(lat, lng),

      // Esta opção permite que o marcador possa ser arrastado
      // para um posicionamento com maior precisão.
      draggable: true,

      map: map
   });


   // Evento que detecta o arrastar do marcador para
   // redefinir as coordenadas lat e lng e
   // actualiza os valores das caixas de texto no topo da página
   google.maps.event.addListener(marker, 'dragend', function() {
      
      // Actualiza as coordenadas de posição do marcador no mapa
      marker.position = marker.getPosition();

      // Redefine as variáveis lat e lng para actualizar
      // os valores das caixas de texto no topo
      var lat = marker.position.lat().toFixed(6);
      var lng = marker.position.lng().toFixed(6);

      // Chamada da função que actualiza os valores das caixas de texto
      getCoords(lat, lng);

   });
}

A actualização dos valores de latitude e longitude das caixas de texto é feita da seguinte forma.

JavaScript /map.jsmarnoto.com

// Função que actualiza as caixas de texto no topo da página
function getCoords(lat, lng) {

   // Referência ao elemento HTML (input) com o id 'lat'
   var coords_lat = document.getElementById('lat');

   // Actualiza o valor do input 'lat'
   coords_lat.value = lat;

   // Referência ao elemento HTML (input) com o id 'lng'
   var coords_lng = document.getElementById('lng');

   // Actualiza o valor do input 'lng'
   coords_lng.value = lng;
}

A utilidade deste pequeno sistema de detecção de coordenadas do Google Maps é limitada. No entanto, os métodos utilizados podem ser adaptados em sistemas mais complexos e permitirem uma interacção bastante interessante com a API.

Todas as dúvidas ou comentários são bem-vindos. Por favor, utilizar a secção de comentários para que todos partilhem da informação.

Download dos ficheiros necessários para este exemplo

• pesquisa_coordenadas.zip

Partilhar:

Categorias:

Coordenadas Google Maps Google Maps API V3

Miguel Marnoto

A minha especialização no Google Maps e na sua API JavaScript v3 é uma consequência do gosto pelos mapas e o reconhecimento da importância que o serviço Google Maps tem hoje no dia-a-dia das pessoas.

• Facebook
• Google+
• Twitter
• LinkedIn
• Rss