Utilize o formulário abaixo para descobrir a distância entre dois endereços.
Se preferir acesse a página de demonstração Calcular distância entre cidades (mapas e rotas), maior e com mais exemplos.
Como a API Google Maps JavaScript V2 foi descontinuada, resolvi criar este artigo, baseado no anterior, Calcular distância entre dois endereços – Google Maps API, para mostra como calcular distância entre cidades com o Google Maps JavaScript API V3.
Exemplo
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function CalculaDistancia(origem, destino) {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origem],
destinations: [destino],
travelMode: google.maps.TravelMode.DRIVING
}, callback);
}
function callback(response, status) {
if (status == google.maps.DistanceMatrixStatus.OK) {
alert("Distância:" + response.rows[0].elements[0].distance.text);
alert("Duração:" + response.rows[0].elements[0].duration.text);
}
}
</script>
<a href="javascript:CalculaDistancia('São Paulo - SP', 'Rio de Janeiro - RJ');">calcular</a>
Antes de mais nada é preciso incluir a linha abaixo, definindo sensor: (true – false) para aplicações que utilizam ou não GPS.
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
Parâmetros utilizados:
origins: ['origem 1', 'origem 2', 'origem 3']
destinations: ['destino 1', 'destino 2', 'destino 3']
travelMode: google.maps.TravelMode.DRIVING (DRIVING - WALKING - BICYCLING )
unitSystem: google.maps.UnitSystem.METRIC (METRIC | IMPERIAL) - Retorna distância em quilômetros ou milhas.
Por último é preciso criar uma função para tratar o retorno, no meu exemplo utilizei a callback.
function callback(response, status) {
if (status == google.maps.DistanceMatrixStatus.OK) {
var origem = response.originAddresses;
var destino = response.destinationAddresses;
var distancia = response.rows[0].elements[0].distance.text;
var duracao = response.rows[0].elements[0].duration.text;
}
}
Tipos de Status
OK Retorno válido.
INVALID_REQUEST Requisição inválida.
MAX_ELEMENTS_EXCEEDED Origem ou destino ultrapassaram o numero máximo de caracteres..
OVER_QUERY_LIMIT Aplicação excedeu o número máximo de requisições em um determinado período.
REQUEST_DENIED Sua aplicação bloqueou o uso do Distance Matrix.
UNKNOWN_ERROR Erro no servidor. Tente novamente que pode funcionar.
A utilização é muito simples, como podemos ver no exemplo acima. Abaixo tem o código fonte comentado da demonstração do topo da página.
Código fonte da demosntração
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calcular distancia entre cidades (mapas e rotas)</title>
<script src="http://code.jquery.com/jquery-1.8.1.js" type="text/javascript"></script>
</head>
<body>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function CalculaDistancia() {
$('#litResultado').html('Aguarde...');
//Instanciar o DistanceMatrixService
var service = new google.maps.DistanceMatrixService();
//executar o DistanceMatrixService
service.getDistanceMatrix(
{
//Origem
origins: [$("#txtOrigem").val()],
//Destino
destinations: [$("#txtDestino").val()],
//Modo (DRIVING | WALKING | BICYCLING)
travelMode: google.maps.TravelMode.DRIVING,
//Sistema de medida (METRIC | IMPERIAL)
unitSystem: google.maps.UnitSystem.METRIC
//Vai chamar o callback
}, 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
//Endereço de origem = response.originAddresses
//Endereço de destino = response.destinationAddresses
//Distância = response.rows[0].elements[0].distance.text
//Duração = response.rows[0].elements[0].duration.text
$('#litResultado').html("<strong>Origem</strong>: " + response.originAddresses +
"<br /><strong>Destino:</strong> " + response.destinationAddresses +
"<br /><strong>Distância</strong>: " + response.rows[0].elements[0].distance.text +
" <br /><strong>Duração</strong>: " + response.rows[0].elements[0].duration.text
);
//Atualizar o mapa
$("#map").attr("src", "https://maps.google.com/maps?saddr=" + response.originAddresses + "&daddr=" + response.destinationAddresses + "&output=embed");
}
}
</script>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<label for="txtOrigem"><strong>Endereço de origem</strong></label>
<input type="text" id="txtOrigem" class="field" style="width: 400px" />
</td>
</tr>
<tr>
<td>
<label for="txtDestino"><strong>Endereço de destino</strong></label>
<input type="text" style="width: 400px" class="field" id="txtDestino" />
</td>
</tr>
<tr>
<td>
<input type="button" value="Calcular distância" onclick="CalculaDistancia()" class="btnNew" />
</td>
</tr>
</tbody>
</table>
<div><span id="litResultado"> </span></div>
<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>
</body>
</html>
Resultado JSON
{ "destinationAddresses" : [ "Rio de Janeiro - RJ, República Federativa do Brasil" ],
"originAddresses" : [ "São Paulo - SP, República Federativa do Brasil" ],
"rows" : [ { "elements" : [ { "distance" : { "text" : "430 km",
"value" : 430395
},
"duration" : { "text" : "4 horas 42 minutos",
"value" : 16942
},
"status" : "OK"
} ] } ]
}