Como calcular corridas de táxi com a API do Google Maps + jQuery
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:
Código removido
Pegaremos os endereços de partida e chegada que o usuário digitar usando os IDs dos inputs.
Estilos CSS
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.
</p> </em>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', {</p> 'query': 'from:' + $('#partida').val() + ' to:' + $('#chegada').val(), 'locale': 'pt_BR', 'panel':'#direcoes'</em> 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) {</p> preco = Math.ceil(result.getDistance().meters /1000 * 1.9 + 4); $('#aviso').html("Vai dar uns R$" + preco);</em> 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. }); </p> return false;</em> O return false é usado para não redirecionar o usuário para outra página quando o formulário for enviado. });</p> });</em> O código JavaScript completo é esse: Deixo vocês com o script online. Sintam-se à vontade para modificar. :-)Para finalizar...
Referências