Traçando Rota com a API do Google Maps
Um recurso bem interessante do Google Maps é poder traçar rotas a partir de um endereço ou CEP de algum para se chegar a algum lugar.
Neste exemplo vamos usar um destino fixo e solicitar ao usuário o endereço de partida.
Antes de mais nada, precisamos adquirir a chave API do Google Maps digitando a URL em que sua página será hospedada (você consegue gerar chave para http://localhost também).
De posse da chave, vamos criar uma página HTML simples e incluir a API do google maps já com a nossa chave:
<script src="http://maps.google.com/maps?file=api&v=2&key=[aqui-entra-a-chave-da-api]" type="text/javascript"></script>
Agora vamos ao JavaScript com as funções necessárias para carregar o mapa e traçar a rota:
// declaração de variáveis
var map;
var marker;
// função que carrega o mapa inicial marcando o nosso ponto de chegada
function load() {
// verifica a compatibilidade do google maps
if (GBrowserIsCompatible()) {
// Instancia o objeto e aplica na div 'mapa'
map = new GMap2(document.getElementById("mapa"));
// Especifica as coordenadas do centro do mapa e o zoom
map.setCenter(new GLatLng(-20.339884,-40.287469), 14);
// Especifica o div em que será exibido o detalhamento da rota
directionsPanel = document.getElementById("route");
gdir = new GDirections(map, directionsPanel);
// Adiciona o evento de erros a função handleErrors
GEvent.addListener(gdir, "error", handleErrors);
//Adiciona barra de zoom e setas para movimentação no mapa
map.addControl(new GSmallMapControl());
//Adiciona um marcador nas coordenadas de chegada
var point = new GLatLng(-20.339884, -40.287469);
marker = new GMarker(point);
map.addOverlay(marker);
marker.title = "Shopping Vitória";
}
}
// Traça a Rota
function setDirections(fromAddress, toAddress, locale){
gdir.load("from: " + fromAddress + " to: " + toAddress,{"locale": "pt_BR"});
// Remove o marcador inicial
map.removeOverlay(marker);
}
// Especifica a origem e o destino
function tracarRota() {
setDirections(document.getElementById('from').value, "Fernando Ferrari, 514, Goiabeiras, Vitória, ES");
}
// Função com tratamentos de erros
function handleErrors()
{
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
alert("Não foi possível achar o endereço. Isso pode ter ocorrido porque o endereço digitado ainda não está inserido no googlemaps ou porque foi digitado incorretamente.\nCódigo do Erro: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Código do Erro: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Código do Erro: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_KEY)
alert("Key inválida. Procure a key correta para este domínio no site do google. \n Código do Erro: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
alert("A directions request could not be successfully parsed.\n Código do Erro: " + gdir.getStatus().code);
else alert("Ocorreu um erro inesperado.");
}
Lembrando que na Tag “Body” é necessários chamarmos a função Load() para carregar o mapa inicial com nosso ponto de chegada marcado:
Para finalizar, o nosso formulário HTML deverá chamar a função tracarRota() como no código abaixo:
<form method="get" action="#" onsubmit="tracarRota(); return false;"> <div> <label for="from">Endereço de partida:</label> <input type="text" id="from" name="endereco" value="Carioca, 353 - Vila Velha - ES - 29100450" class="endereco" /> <input type="submit" value="Achar Caminho" class="enviar" /> </div> </form>
Visualizações: 201
