<!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"></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");
}
}
</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>
Comentários
Postar um comentário