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 )


Latest Comments