« Voltar ao portfolio

Botão para obter a rota no google maps com HTML5 geolocation

Basicamente é um formulário que pega a geolocalização por meio da API de HTML5, coloca os dados num input "saddr" que é um parâmetro que indica ao google que estamos falando de um endereço de saida e no outro "daddr" o de chegada, por meio da url, que ficara assim:

http://maps.google.com/maps?saddr=LATITUDE LONGITUDE&daddr=savassi

Onde latitude e longitude serão números referentes a as coordenadas de saída detetadas pelo browser.

A idéia é que o usuário por meio de um clique saiba exatamente como fazer para chegar, estando ele num computador ou na rua com um tablet ou smartfone, e facilitar com esta ferramenta, muito simples, o trabalho de copiar e colar o endereço no google para saber como chegar em determinado local.

O formulário oculto que enviara os dados

<form action="http://maps.google.com/maps" method="get" target="_blank">
<div id="address"></div>
<input type="hidden" name="daddr" value="savassi" />
<input type="submit" class="endereco" value="ROTA" title="Mostrar rota no googlemaps" />
</form>

A função de Geolocalização de HTML5 para criar o campo "desde" no googlemaps

if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(

function (position) {
$("#address").html( '<input type="hidden" id="address" name="saddr" value='+ position.coords.latitude+position.coords.longitude+' />');

},

function (error)
{
switch(error.code)
{
case error.TIMEOUT:
alert ('Timeout');
break;
case error.POSITION_UNAVAILABLE:
alert ('Position unavailable');
break;
case error.PERMISSION_DENIED:
alert ('Permission denied');
break;
case error.UNKNOWN_ERROR:
alert ('Unknown error');
break;
}
}
);
}

Acho que atualmente todos os sites de lojas ou que ofereçam um serviço onde o cliente tenha que ir no endereço, teria que existir um sistema como este, já que muitas vezes ver o mapa do google desde o site não é prático tanto como saber exatamente como chegar desde o ponto que nos encontramos traçando uma rota, a pé, ônibus ou carro.