Em post anterior comentei sobre um componente que insere o recurso Google Maps em página ASP.NET. Este componente pode se integrar ao Visual Studio e isso facilita o seu gerenciamento. Clique aqui e leia mais. Neste post vamos utilizar o Google Maps e configurá-lo através de sua API. Isso é feito inserindo comandos Javascript em nossa página.

Separei três recursos interessantes que podem ser utilizados para enriquecer os sites e facilitar a vida dos usuários:

  1. Recurso para localização de uma localidade no mapa: se você tem um site na Internet que divulga serviços e/ou produtos, seria interessante facilitar o acesso dos usuários ao estabelecimento. Se a empresa recebe ligações de pessoas solicitando o ponto de referência para facilitar o acesso, que tal exibir um mapa no seu site apontando a localização do estabelecimento?
  2. Recurso para exibir uma possível rota entre duas localidades: como complemento ao posicionamento do estabelecimento no mapa, pode-se mostrar um caminho para o estabelecimento. O site pode mostrar a localização do estabelecimento, solicitar a localização atual do cliente e traçar uma rota no mapa.
  3. Recurso para cálculo de distância entre duas localidades e tempo de viagem: para quem trabalha com viagens pode ser interessante calcular, por exemplo, a distância entre duas cidades e tempo aproximado numa possível viagem entre elas. Além disso, utilizar essa distância para cálculos de diárias, reembolsos, etc.

Esses e outros recursos podem ser adicionados a qualquer site utilizando a API do Google Maps.  Claro que não é tudo tão simples assim. Por exemplo, no terceiro recurso sugerido, mostrar pelo Google Maps a distância entre duas localidades não é complicado. Mas, extrair essa distância para manipulação ou, por exemplo, armazená-la em um banco de dados, isso é mais complicado. A seguir, vamos mostrar como adicionar em um site os recursos citados acima utilizando a API Google Maps em Javascript.

Sugerimos utilizar o Visual Studio para realização dos experimentos. Porém, com as devidas adaptações, a maioria deles podem ser implementados em qualquer editor web. Não iremos tratar dos recursos e conceitos de desenvolvimento web e no Visual Studio. Deixamos a cargo de leitor pesquisar sobre o assunto: Visual Studio, desenvolvimento Web, HTML, CSS, Javascript, ASP.NET, Servidor WEB, etc. Vamos ao trabalho…

Na sua aplicação, crie uma página onde serão implementados os recursos do Google Maps. Para realização dos experimentos insira no corpo (entre as tags HTML <body> e </body>) da página as seguintes tags:

<script src=’http://maps.google.com/maps?file=api&v=2.x&key=‘ type=’text/javascript’></script>
<div id=”mapa” style=”width: 70%; height: 480px; float:left; border: 1px solid black;”></div>
<div id=”rota” style=”width: 25%; height:480px; float:right;”></div>

Note que na primeira linha tem o parâmetro KEY. Se você for utilizar esse recurso em um servidor WEB real, deverá primeiro registrar este servidor no site da Google e receber uma chave que permitirá que seu site exiba os mapas. A chave pode ser adquirida aqui.

Localização de uma Localidade no Mapa

Após as linhas inseridas anteriormente adicione o seguinte script:

<script type=”text/javascript”>
var map;
function initialize() {
map = new GMap2(document.getElementById(“mapa”));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( -12.977753,-38.507779), 15);
var textHtml = ‘<center><strong>Minha Marca</strong></center>’;
var textHint = ‘Minha Marca‘;
var marker1 = new GMarker(new GLatLng(-12.977753,-38.507779), { draggable: false, title: textHint });
marker1.openInfoWindowHtml(textHtml);
GEvent.addListener(marker1, “click”, function () {
marker1.openInfoWindowHtml(textHtml);
});
map.addOverlay(marker1);
}
initialize();
</script>

Este script irá utilizar a DIV ‘mapa’ para mostrar um mapa e colocar uma marca em um ponto específico. Note que em vermelho tem as informações de latitude e longitude correspondente à alguma localidade. Existe várias formas de se descobrir essas coordenadas correspondente à localidade. Leia este post e os comentários que foram colocados. Nele o autor sugere uma forma de descoberta das coordenadas de uma localização e os leitores comentam essa forma ao mesmo tempo que sugere outras formas para identificar essas coordenadas. Voce de ler e escolher a forma que ache mais conveniente para você. Uma vez encontrada essas coordenadas faça a substituição no local específico do nosso script. No texto em azul você pode inserir um texto identicador para a marca inserida. A figura abaixo mostra o resultado esperado.

Como você pode ver, podemos inserir scripts em Javascript para trabalhar com a API do Google Mapas e manipular a exibição de marcas dentro do nosso mapa.

Exibir uma Possível Rota entre Duas Localidades

Para inserir uma rota no mapa, substitua o script anterior pelo mostrado abaixo:

<script type=”text/javascript”>
var map;
var directionsPanel;
var directions;

function initialize() {
map = new GMap2(document.getElementById(“mapa”));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
directionsPanel = document.getElementById(“rota”);
directions = new GDirections(map, directionsPanel);
directions.load(“from: Rua do Carro, Salvador – Bahia, Brasil to: rua jardim santo antonio, salvador bahia“);
}
initialize();
</script>

Em vermelho estão a localização de origem e destino. Se nessas informações, possuir alguma inconsistência ou erro de digitação o mapa não será mostrado. Por isso é importante acessar o site do Google Maps para fazer testes com a origem e destino e, assim, identificar a melhor grafia para origem e destino da rota. A figura abaixo mostra uma rota traçada.

Distância entre Duas Localidades e Tempo de Viagem

No item anterior mostramos como exibir uma rota no mapa e um detalhamento dos caminhos que podem ser utilizados para sair do ponto A e chegar ao ponto B. O resultado exibe ainda outras informações: a distância total entre a origem e o destino,  o tempo médio para percorrer os dois pontos e a distância entre os trechos intermediários no caminho entre a origem e o destino. Pode-se, também, na origem e destino informar nomes de cidades. O Google Maps irá calcular a distância entre as cidades e o tempo estimado do percurso. Para realizar operações com estes valores basta transcrevê-los para um sistema especifico e efetuar os devidos cálculos. Assim, a princípio, a questão de cálculo da distância entre duas localidades e o tempo estimado de transporte está resolvido.

Mesmo funcionando bem, o procedimento de copiar da tela do Google Maps para o sistema específico não me parece muito elegante. Primeiro que, por ser um procedimento com interferência humana, podem ocorrer erros na transcrição. Seria interessante que o próprio sistema se conectasse ao Google Maps e extraísse os valores necessários. Pesquisando na documentação da API do Google Maps não consegui identificar uma forma automática de fazer essa leitura dos dados. Se alguém souber como, por favor, deixe seu comentário para ajudar a nós, pobres mortais. Para tentar resolver esse problema tive que apelar para um processo não muito ortodoxo. A inspiração veio desse post. O autor utiliza o conceito de raspagem de dados, ou data scrapping, que é uma forma de extrair informações diretamente da tela do computador. Leia mais sobre isso aqui. Para o nosso caso fizemos uma “raspagem de HTML” que consiste em receber dentro de um sistema o HTML gerado pelo Google Maps e pesquisar na sequência de tags e caracteres onde está nossa informação; no nosso caso, a distância entre os duas localidades e o tempo aproximado de viagem. Essa pesquisa nas tags HTML pode ser de forma sequêncial, randômica ou utilizando Expressões Regulares para fazer o casamento de expressão. Nossa opção foi pelas Expressões Regulares por parecer ter uma melhor performance. Como desejamos manipular a informação em sistema específico não faz sentido utilizar o Javascript para obter o resultado. Por isso utilizamos a linguagem C# na plataforma .NET para realizar o processo de raspagem. Quem tiver alguma observação ou proposta diferente da nossa, favor deixar um comentário.

Acompanhe o próximo post onde estaremos modelando uma aplicação que utiliza este procedimento: Cálculo de Distância e Tempo de Viagem entre Cidades Brasileiras.