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.

Exemplo do script de cálculo de corridas 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

Código removido

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.

Código removido

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

Código removido

Para finalizar...

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

Referências