Utilizando Google Maps API
Pessoal, desculpa pela demora em escrever alguma coisa, mas é que estou cheio de projetos, e não esta sobrando tempo pra nada, porem, precisei de uma coisa agora pouco que achei que valeria muito a pena escrever sobre.
Para mostrar o cenario, estou desenvolvendo uma ferramenta onde o tecnico colocará endereço origem/destino, e eu irei calcular a distancia entre os 2 pontos para calcular o valor do reembolso da despesa. Para isso, precisei fazer com que o tecnico tenha certeza de que apontou o endereço certo, então tenho a seguinte janela:
Ao digitar a origem ou o destino, o técnico possui um botão, onde abre uma janela com a posição de onde ele apontou, só para ter certeza de que é o lugar que ele quer:
Para a utilização do mapa, useio seguinte código, muito simples (separei os códigos por conta do highlight):
var geocoder;
function initialize() {
map = new GMap2(document.getElementById("map_canvas")); // ID do local onde será mostrado o mapa
map.setCenter(new GLatLng(0, 0), 15);
geocoder = new GClientGeocoder();
findLocation('<?= $_GET['endereco'] ?>'); // Procura a localização e renderiza o mapa
}
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200)
{
alert("Endereço não encontrado");
}
else
{
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
map.setCenter(new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]), 15);
marker = new GMarker(point);
map.addOverlay(marker);
}
}
function findLocation(address) {
geocoder.getLocations(address, addAddressToMap);
}
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Asynchronous Data Retrieval</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
<script type="text/javascript">
// Script na janela acima
</script>
</head>
<body onload="initialize()" style="margin:0px; padding:0;">
<div id="map_canvas" style="width: 500px; height: 500px"></div>
</body>
</html>
Com isso tenho o mapa da imagem anterior.
Bem, após isso, precisava calcular a distancia entre os 2 pontos, então descobri o seguinte: http://maps.google.com/maps/nav?
Com essa URL, da pra se fazer bastante coisa, uma delas o que eu precisava, veja o código em PHP como ficou simples tambem:
$url = str_replace('_FROM_', str_replace(' ', '+', $_POST['txt_origem']), $url);
$url = str_replace('_TO_', str_replace(' ', '+', $_POST['txt_destino']), $url);
$json = json_decode(file_get_contents($url));
$info['distancia'] = number_format(($json->Directions->Distance->meters / 1000), 3, '.', ");
Editado para portugues BR (valeu Victor)
Viu só, muito simples. Na URL eu coloquei um _FROM_ e um _TO_ para poder substituir pelos endereços digitados. Só substitui os espaços pelo sinal de + e substitui na URL, fiz a requisição, com o retorno em JSON (tag output na URL) e tratei a distancia. Dê um print_r($json) para ver o que é possivel buscar no retorno =)
Mais sobre o assunto, pode ser buscado na documentação do API em http://code.google.com/apis/maps/documentation/reference.html
Valeu =)
Parabéns Bruno, muito bom mesmo.
Bruno, sei que ja tem muito tempo desse post, mas gostaria de ressuscitá-lo. Tu poderia explicar melhor sobre esse http://maps.google.com/maps/nav?.
grato
Petterson
Olá Petterson. Então, este endereço é um webservice disponibilizado pelo Google, onde você faz a chamada, e recebe o retorno das informações em basicamente 2 formatos, JSON ou XML. O parâmetro output é quem diz isso, você pode usar o valor js (JSON) ou xml. O parametro "oe" é Output Encode, que por padrão é UTF8, mas vc pode usar ISO88591 para caracteres especiais. O parametro "q" é a query propriamente dita, que possui 2 marcadores, o "from" e o "to, "from%3AENDEREÇO"+to%3AENDEREÇO".
Bem, juntando tudo deve ficar alguma coisa parecida com isso:
http://maps.google.com/maps/nav?hl=de&gl=de&output=js&oe=utf8&q=from%3Aav da liberdade 974 são paulo sp+to%3Aav da liberdade 974 são paulo sp
Com isso você vai receber um JSON com as informações que aparecem no http://maps.google.com, porem de uma forma que você pode tratar isso do modo que você precisar.
Bem, talvez pareça confuso, pois é um assunto meio fora do padrão, mas depois que você entende, fica facinho =)
Ah! e desculpa a demora também, é que não havia visto o comentário. Não sei o que me deu =)
Fala Bruno!
Muito bom esse post, porém, tenho uma ressalva:
vc colocou hl=de e gl=de, ou seja, alemão!
se colocar hl=pt-BR e gl=pt-BR teremos português brasileiro, inclusive na rota.
Abraços
Ai, muito bom Victor, já até atualizei o post. Valeu =)