Já tinha dado uma lida aqui, outra ali, mas hoje resolvi pôr a mão na massa definitivamente e fazer algo que alguns clientes vêm pedindo há algum tempo. Uma ferramenta simples onde pudesse colocar alguns endereços ordená-los como eu quiser e pedir ao google que trace as rotas entre os pontos.
1. Iniciando
Vamos começar com a estrutura básica e a inicialização do mapa.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps - Rotas</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var saopaulo = new google.maps.LatLng(-23.5489433, -46.6388182);
var myOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: saopaulo
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float:left;width:100%;height:100%;"></div>
</body>
</html>
2. Adicionando alguns controles
Certo. Vamos modificar um pouco e colocar um painel de controle a direita, para que possamos adicionar uma lista com endereços, para facilitar um pouco, vamos carregar o jQuery (1.6.2) e jQueryUI (1.8.16). Nosso HTML entre as tags <body></body> ficam assim.
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;">
<div style="padding:10px">
<input type="text" id="addr" name="address" />
<input type="button" id="adic" name="adicionar" value="Adicionar à Rota" />
<p>Dê um duplo clique para remover um endereço da rota</p>
<ol id="route">
<li id="1">R. Cipriano Barata, 200 - São Paulo</li>
<li id="2">Av. Lacerda Franco, 400 - São Paulo</li>
</ol>
<input type="button" id="trace" name="trace" value="Traçar Rota" />
</div>
</div>
E ao nosso JavaScript adicionamos:
$(function(){
//Adiciona endereço à lista
$('#adic').click(function(){
var ender = $('#addr').val();
if (ender != '') {
$('#addr').val('');
var newid = new Date().getTime();
$('#route').append('<li id="' + newid + '">' + ender + '</li>');
}
});
//Habilita função de ordenação da lista
$('#route').sortable({axis:'y'});
//exclui no duplo clique
$('#route').delegate('li', 'dblclick', function(){
$(this).remove();
});
});
Legal, temos uma lista dinâmicas de endereços e um botão pra atualizar o mapa, que não faz nada ainda. Então…
3. Atualizando o mapa com as rotas
Começamos instanciando o objeto DirectionsService da API, para isso vamos adicionar a seguinte linha nas declarações iniciais do nosso bloco de JS.
var directionsService = new google.maps.DirectionsService();
E por fim no clique do botão “Traçar Rota”
function getText(id) {
return $('#'+id).text();
}
$('#trace').click(function () {
var addresses = $('#route').sortable("toArray");
var len = addresses.length
if (len < 2) {
alert('Se liga... Não existe rota sem pelo menos dois endereços!');
return false;
}
var start = getText(addresses[0]);
var end = getText(addresses[len - 1]);
var waypts = [];
for (var i = 1; i < len-1; i++) {
waypts.push({
location:getText(addresses[i]),
stopover:true});
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: false,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
});
O resultado final, você pode ver aqui.
Acompanhe a evolução do código ou proponha melhorias no meu repositório do Git Hub
