google-maps-api-parte-3-geocoding-convertendo-enderecos-em-coordenadas

Nas primeiras 2 partes vimos como criar um mapa básico e como adicionar marcadores. Hoje, veremos como converter um endereço em coordenadas, para usá-lo com oque fizemos antes (^-^)y

Todas as partes da série Google Maps API:

Continuando de onde paramos

Você pode pegar o código, como ficou ao final da Parte II clicando aqui, ou continuar de onde parou.

Se pegar acima, não esqueça de rodar o npm install na pasta do projeto, com o terminal.
Também deve ter o Gulp e Nodejs instalados.
Se tiver dúvidas, veja este post.

Para começar a trabalhar, abra a pasta do projeto com o terminal e rode:

1
gulp

Isso deve abrir o browser, com liveReload. Caso não abra automaticamente, acesse http://localhost:1337

Endereços x Coordenadas

Na API do Google Maps existem alguns diferentes objetos que representam localização, e todos são construídos com base em coordenadas.

As coordenadas cartográficas consistem em Latitude e Longitude. Veja o que significa cada uma:

O que é “Latitude e Longitude”?

  • Latitude: É a distancia angular (medida em graus) à partir do meridiano de Greenwitch. Representada por uma linha vertical no mapa. ( | )

  • Longitude: É a distância angular (medida em graus) à partir do do Equador. Representada por uma linha horizontal ( – )

O Brasil, por exemplo, está em latitude e longitude negativas. Isso por quê estamos à esquerda do meridiano de Greenwitch (no mapa) e abaixo da linha do Equador.

Para converter endereços em coordenadas, usamos o serviço Geocoder.

O serviço geocoder faz parte da API Google Maps, e já temos ele disponível em nosso projeto.

Usando o serviço Geocoder da API Javascript do Google Maps

Vamos instanciar o geocoder juntamente com a variável map.

Para isso, edite o arquivo js/maps.js. Insira a variável geocoder na função initialize(), conforme abaixo:

maps.js (Insira na função initialize)
1
2
3
4
5
6
(...)
function initialize() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(divDoMapa, opcoes);
}
(...)

Agora temos geocoder disponível para uso.
Criaremos uma função para utilízá-lo, que receberá 2 parâmetros: o endereco e a avaliacao.

Essa função executará o geocode() e depois a nossa criaMarcador(), com o resultado.

Adicione, ao final do arquivo js/maps.js

maps.js (insira ao final do arquivo)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function converteEndereco(endereco, avaliacao) {
  geocoder.geocode( { 'address': endereco}, function(resultado, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var marcador = {
          	latitude: resultado[0].geometry.location.k
        , longitude: resultado[0].geometry.location.D	
        , titulo: 'Novo marcador'
        , imagem: avaliacao
      }
       criaMarcador(marcador, map)
    } else {
      alert('Erro ao converter endereço: ' + status);
    }
  });
}

Nossa função começa chamando o método geocode() da nossa instância do geocoder. Este método recebe 2 parâmetros: um objeto com a query, e uma função para tratar o retorno.

O objeto com a query é {address: endereco}.

A função retorna status e resultado (function(status, resultado){}).

Verificamos SE o status == google.maps.GeocoderStatus.OK. Senão (else ao final da função), já damos um alert() com o erro.

SE o status == google.maps.GeocoderStatus.OK, vamos criar nosso marcador!

Note que o parâmetro resultado, que recebemos do geocode() é um Array.

O primeiro item do array é o resultado ‘sugerido’ pelo google, portanto vamos usá-lo: resultado[0].

resultado[0].geometry.location contém a latitude (k) e longitude (D), que usaremos na variável var marcador.

Já fizemos isso (um marcador) no artigo anterior, a única coisa que muda é a propriedade imagem, que será o parâmetro avaliacao, recebido na função e as coordenadas que recebemos no resultado.

Pra fechar, chamamos criaMarcador() com as opção que criamos.

Ufa. É isso: temos uma função que recebe o endereço e avaliação, converte o endereço para coordenadas e cria um novo marcador, com a imagem que setamos como avaliação.

Agora precisamos, de alguma forma, gerar os parâmetros necessários para chamar a função converterEndereco().
Faremos isso com uma outra função, mas antes precisamos inserir um campo de texto para o endereço e um seletor, para a avaliação, no HTML:

Campos de endereço e de Avaliação no HTML

Insira, ao lado dos <button>‘s e antes da <div id="map_canvas"></div>:

index.html (Insira ao lado dos buttons, antes do mapa)
1
2
3
4
5
6
7
8
9
10
11
(...)
  <input type="text" id="endereco" />
  <select name="avaliacao" id="avaliacao">
    <option name="avaliacao" value="0">Muito Bom</option>	
    <option name="avaliacao" value="1">Bom</option>	
    <option name="avaliacao" value="2">Meh</option>	
    <option name="avaliacao" value="3">Ruim</option>	
    <option name="avaliacao" value="4">Péssimo</option>	
  </select>
  <button onclick="converte()">Converter</button>
  (...)

É simples: Um <input type=text e um <select> com 4 options. Note que elas têm value de 0 à 4.

Pensei em usar um array (que começa com 0) para selecionarmos as imagens.

Vamos criar um array pra referenciar nosso objeto imagens. (Eeeei Rômulo tá virando POG issoaí já né?) Calma, gente, é apenas pra facilitar nosso exemplo!

Volte ao js/maps.js e insira, ao final do arquivo:

maps.js (insira ao final do arquivo)
1
2
(...)
var imgArray = [imagens.muitoBom, imagens.bom, imagens.medio, imagens.ruim, imagens.pessimo]

imgArray nada mais é do que um array com as opções do nosso objeto var imagens, que criamos no atigo anterior.

Agora, criaremos a função converte(), que será chamada ao clicarmos no botão.

Ela deve pegar os dados do <input> e do <select>, comparar com o imgArray e chamar a converteEndereco().

Também vai dar um zoom no mapa pra gente.

maps.js (insira ao final do arquivo)
1
2
3
4
5
6
7
8
function converte(){
  var endereco = document.getElementById('endereco').value;
  var seletor = document.getElementById("avaliacao");
  var avaliacao = seletor.options[seletor.selectedIndex].value;
  var imagemMarcador = imgArray[avaliacao]
  converteEndereco(endereco, imagemMarcador);
  map.setZoom(14);
}

Essa função não recebe parâmetros. Ao ser chamada pega o .value do elemento #endereco, e o .value do nosso seletor.

Define a imagemMarcador como p item do imgArray.
O número do item é o value do <option>, ou seja: número de 0 à 4.
Ou seja: a url da imagem desejada.

Aí executa a função converteEndereco() com esses parâmetros e, logo depois usa método setZoom() para aproximar de nosso resultado.

Salvando e testando

Se você está usando o Workflow com GulpJs que configuramos no primeiro artigo da série, é só ir salvando as alterações que a página será atualizada no navegador.

Primeiro, incie um mapa, clicando em “Iniciar”, depois digite um endereço, por exemplo: Rua Virginia Dalabona, 422 - Curitiba - Parana.

Agora, selecione uma avaliação (muito bom), e clique em converte.

Depois, mude o número: Rua Virginia Dalabona, 122 - Curitiba - Parana. Selecione outra avaliação (ruim) e clique em Converte novamente.

Viiiiu que maneiro?

Conclusão

O serviço Geodecoder() traduz endereços em coordenadas.
Para isso, basta instanciá-lo em uma variável, e depois executar com variavel.geocode(query, funcao), sendo query um objeto tipo {address: "endereco aqui"} e a função uma função que receberá status e resultado.

Aí, dá pra brincar com o resultado.

Veja o commit, com as alterações dessa parte 3 neste link. Baixe o código que temos até agora aqui.

No próximo artigo

Na próxima parte da série Google Maps Api Javascript voltaremos a brincar com nosso map:

Vamos manipular o mapa já criado, e experimentar alguns métodos interessantes que vão desde mudar a textura, angulo de visão aérea, zoom, etc…

Fique ligado!!

E pra não perder os artigos, inscreva-se na MailList –>
Uso o mailchimp, e não mando SPAM.