Para usar, basta chamar o método toSource() em um objeto:

alert(objeto.toSource())

E você verá todos os argumentos da instância “objeto”.

Com a API Geolocation que está vindo com HTML5, saber a localização de quem visita seu site se tornou bem simples. As aplicações para esta API são inúmeras e a qualidade do serviços prestados por sites podem melhorar significativamente com esta facilidade, e o melhor, de forma gratuita.

Lembrando que nem todos os navegadores novos suportam esta API. Fiz testes no Google Chrome 5.0.375.99, Firefox 3.6.6 e no Opera 10.60 (todos na versão Linux, claro). Li por aí que o Internet Explorer 8 tem uma implementação de teste. Então se alguém testar no IE, favor deixar nos comentários informações sobre seu suporte.

A API Geolocation prevê a captura da posição geográfica, ou seja, latitude e longitude. E isso já resolve tudo. Com as coordenadas geográficas é possível integrar com outras ferramentas e obter o logradouro e até mesmo integrando com o Google Maps gerar um mapa com a localização do usuário.

Lembrando: Se você tem dúvida se o seu navegador suporta esta API, use o site html5teste.com e procure por Geolocation.

Segurança

Se você está preocupado com a segurança e não quer que determinados sites saibam sua localização, a documentação da API prevê autorização prévia do usuário para o compartilhamento dessa informação com o site em que você está navegando.

Ao acessar um site que deseja utilizar sua localização para agregar algum serviço, provavelmente você verá a mensagem abaixo (Opera):

Muito mais justo do que qualquer site saber a sua localização sem o seu consentimento.

Exemplo Simples: Obtendo as Coordenadas Geográficas

Para entender o funcionamento da API vamos a um simples exemplo para obter as Coordenadas Geográficas:

// verifica o suporte do navegador a API Geolocation
if(navigator.geolocation){
	// Obtem a posição atual
	navigator.geolocation.getCurrentPosition(

	// Em caso de sucesso, obtem a latitude e a longitude
	function(position){
		var lat = position.coords.latitude;
		var lon = position.coords.longitude;
		alert('Latitude:' + lat + ', Longitude: ' + lon);
	},
	// Caso ocorra algum erro (Ex.: O usuário não autorizar o compartilhamento da localização)
	function(error){
		alert('Erro ao capturar localização geográfica.');
	});
}
// Caso o navegador não tenha suporte
else{
	alert('Seu navegador não tem suporte a API Geolocation.');
}

Clique aqui para ver o exemplo funcionando.

Agora que temos as Coordenadas Geográficas, o que fazer com esses números?

Podemos simplesmente saber em qual cidade se localiza essas coordenadas:

Obtendo o Endereço Através das Coordenadas

Existem algumas maneiras de se obter o endereço através de coordenadas. Este processo é chamado de “reverse geo-coding”. Como no Brasil nós não temos um web service que faz esse trabalho a exemplo do geoNames.org que possui os endereços dos EUA, nós temos que arrumar outra solução.

Então vamos criar uma solução utilizando a API do Google Maps. De acordo com os Termos e Utilização da API do Google Maps, você somente pode usar essas informações para exibi-las em um mapa. Qualquer outra forma de exibição é proibida. Porém, existe um meio de extrair essas informações sem imprimi-las em um mapa e que será demonstrado. Lembrando que o código a seguir é apenas um estudo de caso e não pode ser utilizado por ir contra os Termos de Utilização da API do Google Maps.

Para começar, vamos precisar chamar a API do Google Maps e para isso antes temos que gerar uma Chave para autenticação de acordo com o domínio que você for utilizar:

<script type="text/javascript" src=http://maps.google.com/maps?file=api&v=2.x&key=sua-chave"></script>

Para conseguir obter os dados de endereçamento, vamos utilizar um método chamado GClientGeocoder. Originalmente, este método serve para gerar um endereço que será marcado em um mapa (como no último exemplo deste artigo). Mas não vamos trabalhar com mapas ainda. O código a seguir é capaz de pegar informações separadamente, como na imagem abaixo.

Vamos aproveitar o primeiro exemplo para obter a Latitude e a Longitude da sua localização e depois pegar os dados do endereço. Veja o código a seguir:

if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(
		function(position){
			var lat = position.coords.latitude;
			var lon = position.coords.longitude;

			// Iniciando o GeoCoder
			var geocoder = new GClientGeocoder();
			// Informamos a localização e chamamos uma função no retorno da solicitação
			geocoder.getLocations("("+lat+','+lon+")",localizacao);
			//alert(geocoder);

			function localizacao(retorno){
				if (!retorno || retorno.Status.code != 200) {
					alert("Erro: " + retorno.Status.code);
				} else {
					// Placemark é o objeto que contém as infos do endereço
					// Veja no exemplo as informações que contém no Placemark
					endereco = retorno.Placemark[0];
					alert(endereco.address);
				}
			}
		}
	);
}

Clique aqui para ver este código em funcionamento.

Até aqui já obtivemos as Coordenadas Geográficas, já conseguimos as Informações de Endereço e agora vamos mostrar no Mapa a localização do usuário.

Exibindo a Localização no Mapa com Google Maps

Para exibir no mapa, vamos continuar utilizando a API do Google Maps modificando o exemplo acima. Veja como fica:

if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(
		function(position){
			var lat = position.coords.latitude;
			var lon = position.coords.longitude;

			// Iniciando o Mapa
			map = new GMap2(document.getElementById("mapa"));
			// Centralizando na localização
			map.setCenter(new GLatLng(lat,lon), 15);
			// Iniciando o GeoCoder para fazer o Reverter
			geocoder = new GClientGeocoder();
			// Marcando a localização no Mapa
			geocoder.getLocations('('+lat+','+lon+')', exibeEnd);

			// Personalizando a marcação
			function exibeEnd(retorno){
				map.clearOverlays();
				if (!retorno || retorno.Status.code != 200) {
					alert("Erro: " + retorno.Status.code);
				} else {
					place = retorno.Placemark[0];
					point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
					marker = new GMarker(point);
					map.addOverlay(marker);
					marker.openInfoWindowHtml(
					'Coordenadas: ' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '
' +
					'Logradouro: ' + place.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality.Thoroughfare.ThoroughfareName+ '' +
					'Bairro: ' + place.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality.DependentLocalityName + '
' +
					'Cidade: ' + place.AddressDetails.Country.AdministrativeArea.Locality.LocalityName + '
' +
					'País: ' + place.AddressDetails.Country.CountryNameCode);
				}
			}
		}
	);
}

Clique aqui para ver este código em funcionamento.

Nenhum exemplo desse blog armazena informações do usuário e serve apenas para demonstrar o funcionamento da API Geolocation.

Conclusão

A API Geolocation realmente abre um leque de possibilidades e o que podemos esperar são aplicações cada vez mais ricas e interativas, que possam oferecer serviços de acordo com a localização do usuário, assim como já fazem alguns aplicativos para dispositivos móveis, ou simplesmente uma empresa poderá exibir em sua página de contato um “como chegar” a partir da sua localização. Isso pode ser facilmente implementado com poucas modificações no código do artigo “Traçando Rota com o Google Maps” publicando neste Blog.

Abrindo uma Conexão

var db = openDatabase('CONTATOS', '0.1', 'Lista de contatos', 200000);

O código acima cria um objeto de banco de dados “db” com 4 argumentos:

1. Nome do banco de dados;
2. Versão;
3. Descrição;
4. Tamanho estimado da base de dados.

Não se preocupe com o tamanho da base de dados pois ela é flexível. Aparentemente ao exceder o tamanho o navegador mostrará ao usuário uma janela pedindo autorização para expandir o espaço.

Para testar se a conexão foi criada com sucesso, basta verificar se “db” é nulo:

if (! db) alert ("Falha ao conectar no banco de dados.");

É muito importante fazer este teste de conexão antes de qualquer outro código pois existem várias razões pela qual o navegador poderá negar acesso ao banco, como por exemplo por questões de segurança e espaço.

Criando uma Tabela

db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS contatos (id INTEGER PRIMARY  KEY AUTOINCREMENT, nome VARCHAR, tel INTEGER)');
});

(Para saber os Datatypes do SQLite visite a página Datatypes In SQLite Version 3.)

Executando Consultas

O bacana desta API é que ela trata as operações como transações. Com transações é possível reverter as operações em caso de erro. Cada transação pode conter várias SQL e caso alguma apresente falha, nada é alterado no banco, preservando sua consistência.

Há também erro e callbacks de sucesso na transação, assim você pode gerenciar os erros, mas é importante entender que as operações têm a capacidade de reverter as mudanças.

Transação é uma simples função que contém os códigos SQL:

db.transaction(function (tx) {
        // Aqui acontece a mágina com a SQL utilizando o objeto "tx" que foi passado por parâmetro
});

Para ficar mais claro, vamos a alguns exemplos:

Inserindo um Registro

db.transaction(function(tx) {
        tx.executeSql('INSERT INTO contatos (nome, tel) VALUES (?,?)', ['Marcos', '2222-3333'], null, function(tx, e) {
                // caso ocorra algum erro
                alert(e.message);
        });
});

Lendo os Registros

// busca os contatos do banco
db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM contatos', [], function (tx, resultado) {
                for (i = 0; i < resultado.rows.length; i++)
                        alert(resultado.rows.item(i)['nome']);
        });
});

Exemplo Funcional

Atenção, verifique se o seu navegador tem suporte a Web SQL Database antes de clicar no exemplo.

Simples Exemplo de uso do HTML Web SQL Storage.

Gostou? Deixe um comentário!

Web Storage

O Web Storage (ou DOM Storage) é uma API que permite gravar dados no lado do cliente. Provavelmente no futuro ela será responsável pela extinção do Cookie.

Suas vantagens são grandes em relação ao Cookie, a começar pela capacidade de armazenamento de dados, que varia de navegador para navegador mas mantém uma média de 5mb por domínio, outra vantagem é que ao contrário do cookie ele não tem data para expirar, isso acontece somente por questões de espaço e falha de segurança. Um detalhe interessante, é que os dados não são transitados a cada requisição de página com o servidor, como faz o cookie.

Para quem quiser testar a API Web Storage:

Para definir uma variável:

sessionStorage.setItem('chave','valor');

e para resgata-la:

sessionStorage.getItem('chave');

No entanto, o Web Storage continua sendo uma forma simples de armazenamento de dados chave/valor, o que não resolve o problema de aplicações que desejam funcionar de maneira Offline como farí­amos com o extinto Google Gears.

Web SQL Database

Para um armazenamento mais elaborado e de forma estruturada, o W3C criou Web SQL Database. Este é o cara que faz a revolução no armazenamento de dados no lado do cliente.

Como parte do HTML 5, o W3C está trabalhando em um rascunho do Web SQL Database  API, uma especificação que abrange armazenar e acessar dados através de SQL. A especificação da linguagem SQL que é descrito na documentação é o de SQLite 3.6.19.

Esta API permite que as páginas da web interajam com um banco de dados incorporado no cliente, o que é útil para aplicações que desejam armazenar dados localmente ou para navegação offline.

Infelizmente nem todas as versões novas de navegadores implementaram esta API:

• Internet Explorer 8.0 –Não Suporta
• Firefox 3.6.3 –Não Suporta
• Chrome 5.0 – Suporta (acho que desde a versão 4)
• Safari 5.0 –Suporta

Por ser um pouco maior, (vou colocar) coloquei o exemplo de utilização desta API no próximo artigo.

Queria saber a opinião das pessoas que leem este blog se tem ideias ou projetos em mente para utilização de recursos offline.
Então comente abaixo!

function utf8_decode ( str_data ) {
    var tmp_arr = [], i = 0, ac = 0, c1 = 0, c2 = 0, c3 = 0;
    str_data += '';
    while ( i < str_data.length ) {
        c1 = str_data.charCodeAt(i);
        if (c1 < 128) {
            tmp_arr[ac++] = String.fromCharCode(c1);
            i++;
        } else if ((c1 > 191) &amp;&amp; (c1 < 224)) {
            c2 = str_data.charCodeAt(i+1);
            tmp_arr[ac++] = String.fromCharCode(((c1 &amp; 31) << 6) | (c2 &amp; 63));
            i += 2;
        } else {
            c2 = str_data.charCodeAt(i+1);
            c3 = str_data.charCodeAt(i+2);
            tmp_arr[ac++] = String.fromCharCode(((c1 &amp; 15) << 12) | ((c2 &amp; 63) << 6) | (c3 &amp; 63));
            i += 3;
        }
    }
    return tmp_arr.join('');
}

Esta função foi feita com base na função utf8_decode do PHP.

Retirado do site: PHPJS.org

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 type="text/javascript" src=http://maps.google.com/maps?file=api&v=2.x&key=sua-chave"></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:

					Endereço de partida: 


				

Confira o exemplo funcional