The Demo Site

Artigo originalmente publicado na RevistaWEB.net #3.

Alô, mundo. Pretendo ensinar como usar dados da API do Google Maps com a jQuery para calcular a distância entre dois pontos e calcular o valor a ser pago se você fosse de táxi.

O que é necessário

• API do Google Maps - insira o endereço de seu site e aceite os termos para obtê-la.


• jQuery - famosa biblioteca JavaScript. Não é necessário baixá-la, pois usaremos os servidores do Google.


• jMaps - plugin da jQuery para facilitar o uso do Google Maps.

Marcação

Usaremos a seguinte marcação para o formulário para inserção dos pontos de partida e chegada e o mostrador com mapa, direções e o aviso do preço:

<form action="/">


<label for="partida">Ponto de partida: </label><input type="text" id="partida" value="Rua 15 de Novembro, Niterói, Rio de Janeiro"/>


<label for="chegada">Ponto de chegada: </label><input type="text" id="chegada" value="Rua Joaquim Távora, Niterói, Rio de Janeiro"/>


<input type="submit" value="Traçar rota"/>


</form>

<div id="mostrador">


<div id="mapa"></div>


<div id="aviso"></div>


<div id="direcoes"></div>


</div>

Pegaremos os endereços de partida e chegada que o usuário digitar usando os IDs dos inputs.

Estilos CSS

<style type="text/css">


#mostrador{margin-top:10px}


#aviso{margin:10px 0 0 0;background:#FF0;width:95%;padding:5px}


#mapa{width:95%;height:300px}


#direcoes{width:95%}


</style>

Coloquei estilos básicos, pois se não definirmos o tamanho da div #mapa, o mapa não será exibido.

Inserção das bibliotecas JavaScript

Esses são os códigos para inserir a API do Google Maps, jQuery e jMaps. Lembre-se de substituir [API] no fim do atributo src na primeira tag script pelo código obtido no site do Google.

<script src="http://maps.google.com/maps?file=api&v=2&key=[API]" type="text/javascript"></script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>


<script src="jquery.jmap.min-r72.js" type="text/javascript"></script>

Como é a função para calcular o valor total da corrida de táxi

f (x) = x /1000 * 1.9 + 4

O total é calculado usando x, o valor em metros da distância do ponto de partida até a chegada.

Ele é transformado para quilômetros (divindo-o por 1000).

Suponhamos que cada quilômetro custe R$ 1,90, então multiplicamos o total de quilômetros por esse valor.

Para finalizar, somamos 4 que é o valor que é colocado quando entramos no táxi.

O JavaScript mágico

$(function(){

Quando o documento estiver carregado, executará a função dentro das chaves.

$('#mapa').jmap('init');

Iniciará o Google Maps na div que possui o id mapa.

$('form').submit(function(){

Quando o formulário for enviado, a seguinte função será executada.

$('#mapa').jmap('SearchDirections', {


'query': 'from:' + $('#partida').val() + ' to:' + $('#chegada').val(),


'locale': 'pt_BR',


'panel':'#direcoes'

Ele buscará as direções usando os valores dos campos de texto #partida e #chegada e colocará as direções em português no #direcoes.

}, function(result) {


preco = Math.ceil(result.getDistance().meters /1000 * 1.9 + 4);


$('#aviso').html("Vai dar uns R$" + preco);

Quando o resultado chegar, ele usará a função matemática ensinada acima e colocará o preço da corrida na div #aviso. A função Math.ceil() arredonda o total da corrida para cima.

});


return false;

O return false é usado para não redirecionar o usuário para outra página quando o formulário for enviado.

});


});

O código JavaScript completo é esse:

<script type="text/javascript">


$(function(){


$('#mapa').jmap('init');


$('form').submit(function(){


$('#mapa').jmap('SearchDirections', {


'query': 'from:' + $('#partida').val() + ' to:' + $('#chegada').val(),


'locale': 'pt_BR',


'panel':'#direcoes'


}, function(result) {


preco = Math.ceil(result.getDistance().meters /1000 * 1.9 + 4);


$('#aviso').html("Vai dar uns R$" + preco);


});


return false;


});


});


</script>

Para finalizar…

Deixo vocês com o script online. Sintam-se à vontade para modificar. :-)