Acho que consegui resolver.
Primeiro eu corrigi os problemas com a HTML mal formada: Está faltando o </body>
e o </html>
no final, que acrescentei. Você tem um elemento <table>
sobrando que é inútil, e eu o removi. Você está quebrando linha dentro do atributo src
do <iframe>
e isso é ruim, e eu não quebrei linha ali. Além disso, eu acrescentei o <!DOCTYPE html>
e o <meta charset="utf-8">
. Por fim, dei um jeito em alguns escapes que estavam faltando (â
para â
e ã
para ã
).
Depois, eu acrescentei os campos onde o resultado será colocado. Também separei-os dos campos onde a pesquisa é realizada. Fiz os campos do resultado serem somente-leitura para garantir que o resultado deles de fato venha do Google (no entanto, não confie nisso se você for disponibilizar para o público em geral). Coloquei todos eles dentro de um <form>
com um botão submit para poder enviar ao servidor posteriormente:
EDIT: Em 11/06/2018, mais de três anos depois da data em que esta pergunta e esta resposta foram postadas, o Google mudou o formato da API. Até então, era possível utilizar a API gratuitamente sem necessitar de uma API Key. Com a mudança, torna-se necessário o uso de uma API Key, que só pode ser ativada com um cartão de crédito. Veja mais neste link, nesta página e aqui. Nos códigos que se segue, substitua o API_KEY_AQUI
pelo valor do seu API Key. E para usar o seu API Key, você deverá ativá-lo.
<form action="http://www.example.com/url" method="post">
<div><span>Pesquisa:</span></div>
<label for="txtOrigem"><strong>Endereço de origem</strong></label>
<input name="pesquisaOrigem" type="text" id="txtOrigem" class="field" style="width: 400px" value="São Paulo" />
<label for="txtDestino"><strong>Endereço de destino</strong></label>
<input name="pesquisaDestino" type="text" id="txtDestino" class="field" style="width: 400px" value="Rio de Janeiro" />
<input type="button" value="Calcular distância" onclick="CalculaDistancia()" class="btnNew" />
<div><span id="litResultado"> </span></div>
<div><span>Resposta:</span></div>
<label for="txtOrigemResultado"><strong>Endereço de origem</strong></label>
<input name="resultadoOrigem" readonly="readonly" type="text" id="txtOrigemResultado" class="field" style="width: 400px" value="" />
<label for="txtDestinoResultado"><strong>Endereço de destino</strong></label>
<input name="resultadoDestino" readonly="readonly" type="text" id="txtDestinoResultado" class="field" style="width: 400px" value="" />
<br />
<label for="txtDistancia"><strong>Distância</strong></label>
<input name="distancia" readonly="readonly" type="text" id="txtDistancia" value="" />
<label for="txtTempo"><strong>Tempo</strong></label>
<input name="tempo" readonly="readonly" type="text" id="txtTempo" value="" />
<input type="submit" value="Enviar para o servidor" />
</form>
Arrumei o javascript para preencher estes campos no callback. Já aproveitei para retirar o "aguarde" quando a resposta chegar e também traduzi o tempo para o português.
// Tratar o retorno do DistanceMatrixService
function callback(response, status) {
// Verificar o status.
if (status != google.maps.DistanceMatrixStatus.OK) { // Se o status não for "OK".
$("#litResultado").html(status);
} else { // Se o status for "OK".
$("#litResultado").html(" "); // Remove o "aguarde".
// Popula os campos.
$("#txtOrigemResultado").val(response.originAddresses);
$("#txtDestinoResultado").val(response.destinationAddresses);
$("#txtDistancia").val(response.rows[0].elements[0].distance.text);
var tempo = response.rows[0].elements[0].duration.text;
tempo = tempo.replace("day", "dia").replace("hour", "hora").replace("min", "minuto");
$("#txtTempo").val(tempo);
//Atualizar o mapa.
$("#map").attr("src", "https://maps.google.com/maps?saddr=" + response.originAddresses + "&daddr=" + response.destinationAddresses + "&output=embed&key=API_KEY_AQUI");
}
}
Eis o HTML completo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calcular distância entre cidades (mapas e rotas)</title>
<script src="http://code.jquery.com/jquery-1.8.1.js" type="text/javascript"></script>
</head>
<body>
<!-- Parâmetro sensor é utilizado somente em dispositivos com GPS -->
<script src="http://maps.google.com/maps/api/js?sensor=false&key=API_KEY_AQUI"></script>
<script type="text/javascript">
function CalculaDistancia() {
$('#litResultado').html('Aguarde...');
// Instancia o DistanceMatrixService.
var service = new google.maps.DistanceMatrixService();
// Executa o DistanceMatrixService.
service.getDistanceMatrix({
origins: [$("#txtOrigem").val()], // Origem
destinations: [$("#txtDestino").val()], // Destino
travelMode: google.maps.TravelMode.DRIVING, // Modo (DRIVING | WALKING | BICYCLING)
unitSystem: google.maps.UnitSystem.METRIC // Sistema de medida (METRIC | IMPERIAL)
}, callback); // Vai chamar o callback
}
// Tratar o retorno do DistanceMatrixService
function callback(response, status) {
// Verificar o status.
if (status != google.maps.DistanceMatrixStatus.OK) { // Se o status não for "OK".
$("#litResultado").html(status);
} else { // Se o status for "OK".
$("#litResultado").html(" "); // Remove o "aguarde".
// Popula os campos.
$("#txtOrigemResultado").val(response.originAddresses);
$("#txtDestinoResultado").val(response.destinationAddresses);
$("#txtDistancia").val(response.rows[0].elements[0].distance.text);
var tempo = response.rows[0].elements[0].duration.text;
tempo = tempo.replace("day", "dia").replace("hour", "hora").replace("min", "minuto");
$("#txtTempo").val(tempo);
//Atualizar o mapa.
$("#map").attr("src", "https://maps.google.com/maps?saddr=" + response.originAddresses + "&daddr=" + response.destinationAddresses + "&output=embed&key=API_KEY_AQUI");
}
}
</script>
<form action="http://www.example.com/url" method="post">
<div><span>Pesquisa:</span></div>
<label for="txtOrigem"><strong>Endereço de origem</strong></label>
<input name="pesquisaOrigem" type="text" id="txtOrigem" class="field" style="width: 400px" value="São Paulo" />
<label for="txtDestino"><strong>Endereço de destino</strong></label>
<input name="pesquisaDestino" type="text" id="txtDestino" class="field" style="width: 400px" value="Rio de Janeiro" />
<input type="button" value="Calcular distância" onclick="CalculaDistancia()" class="btnNew" />
<div><span id="litResultado"> </span></div>
<div><span>Resposta:</span></div>
<label for="txtOrigemResultado"><strong>Endereço de origem</strong></label>
<input name="resultadoOrigem" readonly="readonly" type="text" id="txtOrigemResultado" class="field" style="width: 400px" value="" />
<label for="txtDestinoResultado"><strong>Endereço de destino</strong></label>
<input name="resultadoDestino" readonly="readonly" type="text" id="txtDestinoResultado" class="field" style="width: 400px" value="" />
<br />
<label for="txtDistancia"><strong>Distância</strong></label>
<input name="distancia" readonly="readonly" type="text" id="txtDistancia" value="" />
<label for="txtTempo"><strong>Tempo</strong></label>
<input name="tempo" readonly="readonly" type="text" id="txtTempo" value="" />
<input type="submit" value="Enviar para o servidor" />
</form>
<div style="padding: 10px 0 0; clear: both">
<iframe width="750" scrolling="no" height="350" frameborder="0" id="map" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?saddr=São Paulo&daddr=Rio de Janeiro&output=embed"></iframe>
</div>
</head>
</html>
Para usar, você deve proceder assim:
- Você escolhe os locais desejados e os preenche nos campos de pesquisa.
- Clique no botão "Calcular distância".
- O Google trará o resultado.
- O javascript preencherá os campos do formulário com os resultados.
- Você clica no botão "Enviar para o servidor" e os dados do formulário serão enviados ao servidor.
No servidor, você vai receber uma requisição POST contendo os seguintes campos de formulário: pesquisaOrigem
, pesquisaDestino
, resultadoOrigem
, resultadoDestino
, distancia
e tempo
. O significado de cada um deles é óbvio. A URL responsável por receber este serviço deverá ser configurada no seu servidor e o campo action
do seu <form>
no HTML deve coincidir com ela.
Se preferir, você pode fazer com que a resposta OK do Google já submeta o resultado via AJAX para o seu servidor automaticamente. Ou então você pode querer colocar alguma lógica de validação mais complexa no seu botão "Enviar para o servidor". Neste caso, se você tiver alguma dúvida de como fazer isso, já fica para o escopo de uma outra pergunta, mas nada te impede de adaptar este processo como lhe convier.
Já no servidor, você executará um prepared statement com uma instrução SQL mais ou menos assim:
INSERT INTO Distancias (pesquisaOrigem, pesquisaDestino, resultadoOrigem, resultadoDestino, distancia, tempo) VALUES (?, ?, ?, ?, ?, ?)
Ou simplesmente assim:
INSERT INTO Distancias (origem, destino, distancia, tempo) VALUES (?, ?, ?, ?)
E então é só preencher os parâmetros do seu prepared statement com os dados recebidos do formulário. No entanto, antes de fazê-lo, talvez você queira pré-processá-los para converter todos os tempos em minutos, converter todas as distâncias em valores numéricos (eliminando o sufixo " km"
), e talvez dando alguma arrumada na origem e no destino caso queira eliminar informações que você julgue desnecessárias como número de rua, CEP, diferenças entre maiúsculas/minúsculas, ou o que você quiser.
<table>
não-fechado que não contém linhas e colunas dentro dele. Isso está certo? Além disso, o seu HTML não está completo, uma vez que não tem o</body>
e nem o</html>
.