Tag Archive for 'javascript'

15
ago

Add4Maps e Google Maps = Rock’n'Roll

Olá,

Como prometido há um tempo atrás vou postar a versão alpha de um lib que tenho trabalhado como projeto pessoal para um mais fácil manuseio do google maps. Vou ser sucinto por que estou com pressa :)

vamos lá primeiro de tudo vamos ver o que usaremos para funcionar:

jQuery.js
ADD4Maps.js
Greversegeocoder.js (opcional)
GoogleMapsApi

No seu html a você deverá colocar:





Feito isso vamos ao ADD4Maps.js

A única parte que você precisa entender neste javascript para iniciar seu trabalho com os mapas é esta que está logo no início do arquivo:

	//Always charge it in frist load
	//Isso irá chamar o google Maps API
	google.load("maps", "2.x");

	//Global var
	//Define sua variável ( voce pode ter mais de um mapa tendo mais de uma variável )
	var userMap = "";

	jQuery(document).ready(function() {
		//Se quiser controlar melhor as inicializacoes dos mapas comente este funcao
		//basicamente ela inicia nosso mapa assim que o gmaps carrega
		google.setOnLoadCallback(initializeMaps);
	});

	//Funcao responsavel pela inicializaçao do mapa.
	//As únicas configs devem ficar aqui.
	function initializeMaps() {
		//Cria seu mapa na variavel userMap
		userMap = new ADD4Map({
			'divMap':'mapBlock', //Diz qual vai ser o id que receberá o mapa
			'addressContainer':'addressContainer', //Container para exibir endereços do stringToAddress
			'directionsContainer':'directionsContainer',//Container para receber as informacoes do gdirections
			'locale' : 'pt_BR', //Idioma do mapa
			'startLat': -23.555581, //Latitude inicial
			'startLon': -46.657533,//Longitude inicial
			'defaultIcon': "public/images/myIcon.png", //Define um icone próprio pra exibir no mapa bem legal se bem utilizada
		})
		//Inicializa o mapa de userMap
		userMap.initialize();
	}

Feito isso temos nosso mapa pronto e rodando? Não vamos montar a estrutura html BÁSICA ( receber apenas o mapa não vamos exemplificar endereços e direções aqui, a lib está bem documentada, basta dar uma olhada nos metodos e suas documentações afinal de contas ainda não estamos em uma versão final )

Pois é, realmente muito difícil fazer nosso mapa funcionar :)

Bom feito isso agora vamos pra parte divertida, usar o mapa, temos uma enorme lista de métodos nesta versão alpha e que funcionam muito bem vou exemplificar os mais básicos deles:

Afim de evitar muito trabalho eu preferi nesta versão manter o esquema de pontos por array de coordenadas eles funcionam da seguinte forma:

var ponto = {”latitude”:-23.555581,”longitude”:-46.657533};

Bem auto explicativo feito isso vamos para nosso primeiro método:

userMap.viewPoint

var ponto = {"latitude":-23.555581,"longitude":-46.657533};
userMap.viewPoint(ponto);

Simples e rápido, isso mostra um ponto no mapa sem muita coisa apenas exibe o ponto. Agora vamos pra algo um pouco mais elaborado:
userMap.addMark

var ponto = {"latitude":-23.555581,"longitude":-46.657533};
userMap.addMark(ponto,"Olá Mundo
Vejam só eu sei falar!!”,true)

Isso irá criar um ponto no mapa com um click no ponto que exibirá o famoso “balãozinho” com um conteudo html e o último parâmetro true define que o ponto será o centralizado no mapa. No próximo exemplo a gente vai usar o recurso de directions baseado em mão e contramão do google maps para achar rotas:

userMap.traceDirections

pontos[0] = {”latitude”:-23.555581,”longitude”:-46.657533};
pontos[1] = {”latitude”:-23.555581,”longitude”:-46.657533};
pontos[2] = {”latitude”:-23.555581,”longitude”:-46.657533};
pontos[3] = {”latitude”:-23.555581,”longitude”:-46.657533};

userMap.traceDirections(pontos)

No nosso caso estamos sempre no mesmo ponto mas mudando as coordenadas é possível traçar as rotas. Por último ( mas não o último recurso da lib, lembrando que temos mais muitos métodos e que a combinação deles e de um pouco de jogo de cintura nos permite fazer de tudo e mais um pouco ):

userMap.setPointFromAddress

userMap.setPointFromAddress("Rua Augusta,1000,Consolação,São Paulo,SP,01304-001,Brazil","Rua do rock!“,true);

Bem bacana não? Este método é limitado pelo google por 10.000 consultas/dia por ip ou seja a não ser que todo mundo que conectar no seu site veja mais de 10.000 vezes este recurso isso é mais que suficiente lembrando que é por CLIENTE IP e não SERVIDOR IP :) vamos só explicar um pouco:

O primeiro parâmetro é o endereço do cidadão, quanto mais completo mais preciso, eu usei o mais completo dos completos exemplos aí vai de você o quão preciso você pretende ser, o segundo método define um conteudo html como já vimos anteriormente e o terceiro define se o ponto vai ser o centro do mapa.

Bom, por hora é só, relembrando que a lib está em estágio alpha e que as pessoas usem por conta e risco, contribuições são bem vindas, usem e abusem e mantenham os créditos para que possamos continuar fornecendo ferramentas úteis e free para os amigos desenvolvedores e comunidade em geral.

Vale lembrar para dar uma olhada no código pois temos outros exemplos e uma documentação bem bacana e explicativa sobre os diversos métodos desta ferramenta, os arquivos estão disponíveis para download:

jquery (obrigatório)
add4maps (obrigatório)
greversegeocoder (opcional)
php (obrigatório em alguns métodos pois usei para facilitar o desenvolvimento, basicamente ele tem funcoes com o mesmo nome do php e sintaxe mas para javascript )

28
jun

ADD4Labs - GMaps ADD4 Javascript Class

Olá caros,

Bom copiando um pouco o estilo do Cairo de postar um pouco na série “O que andamos fazendo?!” gostaria de deixar um pouco de agua na boca até o lançamento da nossa ferramenta para trabalhar com Google Maps Ajax.

Trata-se de uma classe em javascript para tornar a vida de quem pretende, quer, anseia, sofre em usar o GMaps, um pouco mais fácil, sim usando JQuery e o GMaps estamos testando uma nova classe escrita por Kléderson Bueno em javascript. Assim que os testes forem bem sucedidos vamos disponibilizar o(s) arquivo(s) e uma documentação para tal, por hora apenas o que posso dizer é que vale muito a pena esperar por esta ferramenta partindo do princípio do digite menos, faça mais, mais rápido e com mais qualidade, por exemplo:

Para criar um ponto no mapa com um conteudo html antes tinhamos:

var thisPoint = new GLatLng(point['latitude'],point['longitude']);
var thisMarker = new GMarker(thisPoint);

GEvent.addListener(thisMarker, “click”,
function() {
thisMarker.openInfoWindowHtml(htmlContent);
}
);

gmap.addOverlay(thisMarker);

e hoje temos:

add4Map.addMark(pointCoords,htmlContent);

Bem mais fácil hein?

Bom é isso até o final da semana lançaremos a classe para testes pela comunidade.

Continuem acompanhando.

Até Breve!

Kléderson Bueno

23
jun

::Empresa

ADD4 Comunicação

A ADD4 Comunicação é uma Agência Digital que desenvolve sites, intranets, sistemas, jogos interativos e diversas soluções para web e webbased. Utilizamos as mais novas e modernas tecnologias e metodologias para desenvolvimento em PHP, Ruby on Rails, Flash, Action Script, JavaScript, AJAX, Tableless, .NET, Adobe AIR e muitas outras soluções de TI, bem como criação de campanhas e atividades para web.

A ADD4 Comunicação está preparada para desenvolver soluções simples e eficientes, dentro da demanda exigida pelo cliente, para os mais complexos problemas.

A ADD4 Comunicação conta com profissionais dinâmicos e arrojados, que somam juventude e experiência ao mesmo tempo, o que proporciona aos clientes mais exigentes a certeza de um trabalho inovador e de altíssima qualidade.

Dinamicidade, interatividade, qualidade e responsabilidade são as diretrizes de nosso trabalho.

Para mais informações comercial@add4.com.br .