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. :-)
Referências
Gostou desse post? Então assine o RSS Feed, Email ou siga-me no Twitter!
Artigos relacionados:
- Como Usar o Firebug em Navegadores que Não Sejam o FireFox
- Como Ganhar Muito Dinheiro na Internet Exibindo Anúncios Contextuais de Produtos com o Boo-Boxifier
- 10 sites para achar lugares legais e baratos para viajar nas férias
- Saiu a jQuery 1.3 – Quais as Novidades
- Como Programar 5 Vezes Mais Rápido A Parte Client-Side de Sites Com 5 Super Plugins para a jQuery
Assine o RSS
[...] PedroMenezes.com No TweetBacks yet. (Be the first to Tweet this post)Posts RelacionadosConvertendo coordenadas de [...]
Muito interessante!
Responder
Olá,
Muito interessante esse script, porém tenho uma dúvida:
Existe uma taxa inicial que é cobrado nos taxis logo que vc entra nele (isso aqui em Salvador/ba)
Esse script ele calcula pelo valor da quilometragem, sem essa taxa. Como faço para inserir o valor dessa taxa no calculo?
Responder
Rodrigo Corrêa e Castro respondeu em October 29th, 2009 9:29 pm:
Thiago, da uma lida no tópico: Como é a função para calcular o valor total da corrida de táxi, ali fala sobre essa taxa.
Responder
Boa tarde Pedro,
Gostaria de saber como poderiamos inserir a opção por Bandeira 2 ou melhor, como poderiamos inserir a opção entre Bandeira 1 e 2 com os seus respectivos valores diferenciados.
Tenho tentado mas, ainda não consegui admito.
Até mais.
Responder
Mamados respondeu em February 28th, 2010 10:31 am:
Djones, adiciona no formulario um radio com as opções bandeira 1 e bandeira 2.
ex: Bandeira 1 Bandeira 2
Pega o valor desse radio no jQuery com o seguinte code:
var precokm = $(‘#bandeira’).val();
(coloquei no value do radio o valor por km rodado, pois acho que diminui o code, mas vc pode mudar para somente 1/2 e depois fazer um if para dar o preço de acordo com isso)
depois muda essa linha:
preco = Math.ceil(result.getDistance().meters /1000 * 1.9 + 4);
para
preco = Math.ceil(result.getDistance().meters /1000 * precokm + 4);
acredito que já deve funcionar! eu não testei o code mas a idéia é +- essa ai!
Responder
Mamados respondeu em February 28th, 2010 10:34 am:
ops, na parte do radio seria assim:
<input type=”radio” name=”bandeira” value=”1.9″ checked> Bandeira 1 <input type=”radio” name=”bandeira” value=”2.3″> Bandeira 2
Responder
Pedro Menezes, meus parabéns pelo code!
Demais! :P
(pra mim vai ser útil só uma parte, que é a que retorna a distancia entre os 2 pontos, com o result.getDistance().meters mas já me poupou um grande trabalho de mexer com lat/long!)
Valeu!
Responder